【Flexbox】display : flexで要素を均等に横並びにする

ページ内の要素を横並びにする際、回り込みを指定するfloatプロパティを使わず、
CSSのFlexbox（CSS Flexible Box Layout Module）という機能を使い、ブロックコンテンツを横並びにしていく方法をご紹介します。

Flexboxを使えば、floatやcleafixといったテクニックを使うよりも簡単に要素を横並びにすることが出来ます。

今回は初めの一歩としてFlexboxの初歩的な使い方を記します。

---

横並びにする前の状態

containerというクラスが付けられた親要素の中身に3つのpタグが子要素として入っている。
ブロックコンテンツは通常、このように親要素の領域に目一杯広がる。
（要素が縦並びになる仕組みでもある）

– HTML –

– CSS –

上記のスタイルのcontainerクラスに対してdisplayプロパティを書き加え、値をflexとする。

　
子要素が横並びになった。
　

display:flexとすることで親要素と内包する子要素がFlexboxコンテンツ化する。
その際、親要素と子要素はそれぞれ

フレックスコンテナ（親要素）
フレックスアイテム（子要素）

という扱いとなる。

ブロックコンテンツと異なり、子要素の横幅はそれぞれの内容量で決まり、親要素に余剰スペースがある場合はそのまま余白となる。

– 親要素に出来ている余白を子要素で埋める –

子要素に対してflexプロパティを指定する。

全ての子要素の※flexプロパティをflex:1として親要素内の余白を同じ比率で埋める。

　
子要素が均一に広がり、余白を埋める事が出来た。
　

※flexプロパティには伸長比(flex-grow)、縮小比(flex-shrink)、ベースサイズ(flex-basis)を指定する事が出来る。

今回はプロパティに一つだけ値を設定し、伸長比率(flex-grow)のみを設定しています。

その他のプロパティの使い方などは次回以降のFlexboxについての記事で紹介したいと思います。