CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、2行や3行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。 gistabb6fdc10b786d856f22 すると、子要素(div.box)のwidth: 200px;が無視されます。画面に1行に収まるようにwidthが自動調整されるのです。 flex-wrap: wrap;措定 次に、flex-wrap: wrap;を指定します。 すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。 良かったですね!もうfloatを使う必要はありませ