Flexboxの使い方

CSS基礎

Flexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。これを使う事でfloatを使って作っていたレイアウトが感覚的に作れるようになります。

視覚で見るのが非常に解りやすいです。
www.youtube.com

メリット
  • 少ない記述で簡単に横並びにできる！
  • 横並びになった要素の高さが最初から揃ってる！
  • 要素を上下左右、好きな順序に並び替えられる！
  • 高さの異なる横並びの要素を、簡単に上下中央揃え！

などなど、本来CSSでは出来ずにjQueryなどで行っていた事が非常に簡単に出来るようになります。



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;　全てのアイテムが等間隔に配置されます。

子要素に指定

order

「order」プロパティは、display: flexを指定している親要素に配置される子の順番をコントロールします。
order: 1;
order: 2;
order: 3;



www.webcreatorbox.com




Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld