レイアウト
flex-wrap
flex-wrap は、フレックスボックスの項目が 1 行に収まらないときに、折り返して次の行に並べるかどうかを指定します。
構文
nowrap | wrap | wrap-reverseプレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
flex-wrap: wrap;
}コントロール
flex-wrapwrap
1234
解説
値の書き方
nowrap：折り返さずに 1 行に並べます。収まらないときは項目が縮み（flex-shrink）、縮みきれない分は箱からはみ出します。初期値です。wrap：収まらない項目を次の行へ折り返します。横に並べているときは、新しい行が下に増えます。wrap-reverse：折り返しますが、行の増える向きが逆（横に並べているときは上）になります。
このページのプレビューは、補助の宣言で display: flex にして、箱の幅の 30% の項目を 4 つ並べています。nowrap では 4 つが 25% ずつに縮み、wrap では 3 つと 1 つに分かれます。
折り返したあとのそろえ方
行の中で項目をそろえるのは align-items、行どうしの並べ方を決めるのは align-content です。行と行の間をあけるには row-gap（gap）を使います。
flex-direction: column のときは、箱の高さが決まっていないと項目が下へ伸び続けるだけで折り返しません。縦に折り返すには、箱に高さか最大の高さを付けます。
ショートハンド
flex-flow を使うと、flex-direction と flex-wrap をまとめて書けます（flex-flow: row wrap）。