CSS3 flex(box) メモ

CSS3 のflex(box) を使ってみたのでメモ。 flexを使うことで，floatで悩んでいた水平方向の揃え，垂直方向の揃え，wrap後の揃え方などを調整でき，フレキシブルなレイアウトが可能になる．

サンプル（codepen）

floatを使わずとも以下のようなレイアウトがすぐできる．

対応ブラウザ

~~現時点(2015年6月1日)では、IE11, Firefox31, Chrome31, Opera28, Opera Mini8.0, Android Browser4.4, Chrome for Android42 に対応しているそうです。~~ ~~Safari, iOS Safari では、ベンダープレフィックス-webkit-が必要なようです。~~

Can I use... Support tables for HTML5, CSS3, etc

現時点（2017年12月29日）では，以下のブラウザで対応している．

IE11:部分実装
Edge:15以降
Firefox:56以降
Chrom:49以降
safari: 10.1以降
iOS Safari: 10.2以降
Opera mini：すべて
Chrome Android: 62
UC for Android: 11.4 ベンダープリフィックス -webkit- が必要
Samsung Internet: 4以降

ドキュメント

配置方向 `flex-direction`

flex-direction で並べる方向を決めることができる。

flex-direction: row;: 横に配置。左から右へ(デフォルト)
flex-direction: row-reverse: 横に配置するが、右から左へ
flex-direction: column;: 縦に配置。上から下へ
flex-direction: column-reverse;: 縦に配置するが、下から上へ

折り返し flex-warp

flex-wrap で折り返しをするかしないかを決めることができる。

flex-wrap: nowrap;: 折り返しなし。ウィンドウを狭くしていくと折り返しされず、子要素(コンテンツ)の幅も狭くなっていく(デフォルト)。
flex-wrap: wrap;: 折り返しあり。ウィンドウ幅 < 子要素全体の幅　のとき子要素一つ一つを自動的に次のカラムへ折り返す。メディアクエリなしで切り替えてくれるのでとても便利！。上のサンプルでは基本これを使用。
flex-wrap: wrap-reverse;: 折り返すが、折り返し方向が逆になる。下へ折り返すのが上へ折り返す。

伸びる倍率 `flex-grow`

子要素を並べて余りのスペースがある場合、それぞれの「flex-grow」の値に従い、 自動的に利用可能な領域いっぱいまで伸びる。値が大きいほど拡大する．

子要素に設定する。デフォルトでは設定なし。

すべての子要素を flex-grow: 1; にした場合、全ての子要素は同じ大きさで伸び縮みする。
1つの要素のみ flex-grow: 2; とし、他の要素を flex-grow: 1; としたとき2:1の大きさの比率で伸び縮みする。

順番 `order`

デフォルトで order: 0;，値の小さい順番で並ぶ。同じ値の場合、HTML通りの順番になる。

水平方向の揃え方 `justify-content`

justify-content で水平方向の揃え方を設定できる。

justify-content: flex-start; 横配置の場合、「左揃え」、縦配置の場合、「上揃え」(デフォルト)
justify-content: flex-end;: 横配置の場合、「右揃え」、縦配置の場合、「下揃え」
justify-content: center;: 中央揃え
justify-content: space-between;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける（左右の端には余白をとらない）。
justify-content: space-around;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける。さらに、左右の端の子要素にも半分ずつ間隔を空ける。

水平方向の揃え方 `justify-content`

justify-content で水平方向の揃え方を設定できる。

justify-content: flex-start; 横配置の場合、「左揃え」、縦配置の場合、「上揃え」(デフォルト)
justify-content: flex-end;: 横配置の場合、「右揃え」、縦配置の場合、「下揃え」
justify-content: center;: 中央揃え
justify-content: space-between;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける（左右の端には余白をとらない）。
justify-content: space-around;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける。さらに、左右の端の子要素にも半分ずつ間隔を空ける。