CSS3

プロパティ

flex-wrap

→●、mdn

フレックス コンテナ内のアイテムの並び折り返し。

flex-wrap プロパティは、次の 2 つを制御する：

• flex コンテナは［単行°、複行°］どちらになるか。
• flex コンテナの交叉軸の向き ─ これは、flex コンテナ内で新たな行°が堆積されていく方向（順方向か逆方向か）を決定する。

nowrap

flex コンテナは単行°になる。

交叉軸の向きは、wrap のときと同じになる。

<DIV style="width:170px; height:120px; border:1px solid red;
 display:flex;
 flex-wrap:nowrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">4</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">5</DIV>
</DIV>

flex-basisの値が守られず詰められる

wrap

flex コンテナは複行°になる。

交叉軸の向きは、順方向 ─ すなわち、交叉始端は［ 現在の書字モードの［ 行内始端、ブロック始端 ］のうち交叉軸に属する方 ］になり、交叉終端はその反対側になる。

<DIV style="width:170px; height:120px; border:1px solid red;
 display:flex;
 flex-wrap:wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">4</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">5</DIV>
</DIV>

wrap-reverse

flex コンテナは複行°になる。

交叉軸の向きは、逆方向 ─ すなわち、［交叉始端、交叉終端］は wrap のときと入れ換わる。

<DIV style="width:170px; height:120px; border:1px solid red;
 display:flex;
 flex-wrap:wrap-reverse;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">4</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">5</DIV>
</DIV>

<DIV style="width:170px; height:120px; border:1px solid red;
 display:flex;
 flex-direction:row-reverse;
 flex-wrap:wrap-reverse;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">4</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">5</DIV>
</DIV>

関連

flex-direction。

テスト