flexboxで折り返した際に、子要素の数が5つ(奇数)で1行目と2行目の個数が異なる場合に子要素間の余白を均等にしたい場合のHTMLとCSSの指定方法を解説しています。親要素にjustify-content:space-between;を指定し、さらに個別で子要素にmarginで指定する必要がありますので、少しだけ面倒ですが、flexboxに慣れると簡単に整ったレイアウトが組めるので是非活用しましょう！

flexboxで縦並びレイアウトについて、詳しく解説しています。親要素にdisplay:flex;とflex-direction:column;（またはcolumn-reverse）を指定すると子要素が縦並びなります。本記事では縦並びにした子要素の中央揃え、上揃え、下揃え、右揃えなど配置の方法も解説しています！

flexboxで子要素を中央揃えにする方法を解説◎親要素にjustify-content:center;を指定するだけですが、上下左右中央揃えの場合はalign-items:center;も指定します。今回は横並びの中央揃え・縦縦並びの中央揃え・上下左右中央揃えの3パターンを解説しているので、flexboxで中央揃えがうまくいかないという場合は参考にしてみてください。

flexboxで横並びにした場合に中央揃え、均等、右揃え、左揃えにする方法を解説しています。フレックスコンテナー（親要素）にdisplay:flex;とflex-direction:row;（デフォルト値）を定義し、横並びになったフレックスアイテム（子要素）を中央揃えにしたい場合は「justify-contents:center;」、均等に並べたい場合は「justify-content:space-between;」「justify-content:space-around;」「justify-content:space-evenly;」のいずれかをCSSで指定します。

flexboxレスポンシブのサンプルデザインです。ウィンドウサイズに応じて3カラム、2カラム、1カラムまで変わります。出来るかぎりflexboxで子要素が横並びの時の子要素・孫要素・ひ孫要素の高さは揃えられるように指定しています。

flexboxで横並びにした要素の折り返し指定をするには、CSSで親要素にflex-wrap:wrap;を指定します。その他、flexboxで子要素を折り返した際の余白の指定の仕方についても紹介しています。

flexbox横並びで子要素を余白なしの均等幅で配置する方法を解説しています。子要素を均等に配置するには、子要素にwidth:100%;を設定するか、flex-grow:1;を設定すると簡単です！折り返して複数行になる場合は、calc関数などを使用すると計算する手間がありません。

flexboxレイアウトで子要素を横並びにする方法を解説しています。flexboxを使うと子要素がブロック要素でも簡単に横並びが可能。親要素にdisplay:flex;の一行追加で簡単に横並びにできる！実際にHTMLとCSSを使って解説しています◎

Flexbox横並びレイアウトを、子要素・孫要素まで高さを揃える方法を出来る限りわかりやすく解説していきます。子要素は親要素にdisplay:flex;を指定すると、簡単に高さが揃いますが孫要素は少し工夫が必要です。

Flexbox横並びデザインの画像の高さを揃える方法について解説しています。画像の高さが揃わないという問題を解決！整ったレイアウトでホームページを制作しましょう。