Flexbox（Flexible Box Layout Module）はCSSのレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。
視覚で見るのが非常に解りやすいです。
www.youtube.com
メリット
- 少ない記述で簡単に横並びにできる！
- 横並びになった要素の高さが最初から揃ってる！
- 要素を上下左右、好きな順序に並び替えられる！
- 高さの異なる横並びの要素を、簡単に上下中央揃え！
Flexboxの基本
flexboxレイアウトを使うには親要素のdisplayプロパティに「flex」を指定するだけです。今回は「ul」要素を使います。
ul { display: flex; }
flex-direction
「flex-direction」プロパティを設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flex-direction: row; で左から右
row-reverse; で右から左
column; で上から下
column-reverse; で下から上
ul { width:600px; margin: 20px; display: flex; flex-direction: row; }
flex-wrap
「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。
flex-wrap: nowrap;（初期値）は各アイテムの幅が親要素の幅に収まるように縮小される。
flex-wrap: wrap; 各アイテムの幅が親要素の幅に収まらない場合、下に回り込みます。
flex-wrap:wrap-reverse; 子要素を折り返し、複数行に下から上へ並べる
justify-content
「justify-content」プロパティは、flexアイテムを一行に配置します。（text-alignの指定と類似）
justify-content: flex-start;（初期値）flexコンテナの左側に配置されます。
justify-content: flex-end; flexコンテナの右側に配置されます。
justify-content: center; 中央に配置されます。
justify-content: space-between; 最初と最後のアイテムは端に、残りは等間隔で配置されます。
justify-content: space-around; 全てのアイテムが等間隔に配置されます。