CSSでレイアウトしてみよう（flexbox版）

flexbox-basic.html

WEBサイトをレイアウトする為に実装され、スマートフォンなどの端末でも最適で柔軟なレイアウトが実現できるプロパティです。
現状、Webサイトをレイアウトするために用いられるもっともメジャーなプロパティなので是非覚えておきましょう。

<ul class="flexbox"> /* Container */
  <li>flexアイテム</li> /* Item */
  <li>flexアイテム</li> /* Item */
  <li>flexアイテム</li> /* Item */
</ul>

.flexbox {
  display: flex;
}

メリット

親要素にdisplay: flex;と指定すれば、子要素が横並びの対象となります。

デメリット

レガシーブラウザが対応していない場合がある。
- IE9は未対応。IE10はdisplay:-ms-flexbox。
- IE11ではflex:1ではなくflex-grow：1としなければならない。
- Safari8 未満はdisplay: -webkit-flex
- iOS9 未満はdisplay: -webkit-flex
- Android 4.3 未満はdisplay: -webkit-box
モダンブラウザでも問題がある場合がある
- flexboxのバグに立ち向かう（flexboxバグまとめ）

Flexboxのプロパティ

Flexbox関連のプロパティはたくさんあります。
無理にすべて覚えずに下記の表をうまく利用してレイアウトしてみてください。

コンテナー用プロパティ

flex-direction　-　flexアイテムを並べる方向
flex-wrap　-　flexアイテムの折り返し
justify-content　-　左右中央
align-item（align-self） -　上下位置
align-content　-　行の揃え方