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を使う必要はありませ
![要素の横並び+複数行ならflex-wrapが便利 - コンパイラかく語りき](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d5f456572d2d9a73e607576b1482ad5657a3d21/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fc%2Fchuck0523%2F20160320%2F20160320190533.png)