読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

要素の横並び+複数行ならflex-wrapが便利

CSSflex-wrapを最近知ったのでメモ。

display: flex; で要素を横並びにしつつ、2行や3行にしたいときがあるじゃないですか。そんなときに便利です。

 

flex-wrap指定なし

まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。

gistabb6fdc10b786d856f22

 

すると、子要素(div.box)のwidth: 200px;が無視されます。画面に1行に収まるようにwidthが自動調整されるのです。

f:id:chuck0523:20160320190533p:plain

 

flex-wrap: wrap;措定

次に、flex-wrap: wrap;を指定します。

すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。

f:id:chuck0523:20160320190718p:plain

 

良かったですね!もうfloatを使う必要はありません。ましてや、table要素でレイアウトするなんてことは過去のテクニックです。

 

中央寄せ・外寄せ

余談です。

横並び+改行には成功しましたが、実務では「中央寄せ」か「外寄せ」にすることがあるかもしれません。

そんなときは、justify-contentを指定します。

justify-content: space-around; を親要素に指定すると、子要素が中央寄せになります。

f:id:chuck0523:20160320191127p:plain

justify-content: space-between;を指定すると、要素が外寄せになります。

f:id:chuck0523:20160320191230p:plain

(わかりやすいように画面幅を変えました。)

 

 

レガシーブラウザ

display: flex; + flex-wrap: wrap; の組み合わせは便利なのですが、残念ながら対応していないブラウザがあります。

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

 

qiita.com