flex-wrap

Flexboxの項目を1行のままにするか、複数行へ折り返すかを決めるプロパティ。折り返した行を積み重ねる向きも切り替えて比べられます。

遊んでみよう

同じ幅の5項目を限られたコンテナーへ配置

12345

nowrap

CSS

.element flex-wrap: nowrap;

値のパターン

折り返し flex-wrap

flex-wrapの構成要素

01nowrap

すべての項目を1行に置く

初期値です。項目が縮みきれないときも改行せず、フレックスコンテナーからはみ出すことがあります。

02wrap

収まらない項目を次の行へ送る

利用できる主軸方向の幅を超える項目を、交差軸の始点から複数行へ折り返します。

03wrap-reverse

行を積み重ねる向きを反転

項目の順序は保ったまま、交差軸の始点と終点を入れ替えて反対側へ行を重ねます。

早見表

初期値はnowrapです。折り返しを許可するかと、複数行を交差軸のどちら側へ積むかを3つの値で指定します。

01nowrap1行のまま並べる初期値

02wrap複数行へ折り返す通常方向

03wrap-reverse反対側へ折り返す交差軸を反転

04initial初期値のnowrapへ戻すグローバル

05inherit親要素の指定値を受け継ぐグローバル

06unset継承しないため初期値へ戻すグローバル

よくある使い方

カード一覧を画面幅に合わせて折り返す

カードの基準幅を保ちながらwrapを指定すると、収まらないカードが次の行へ移動します。

.cards { display: flex; flex-wrap: wrap; gap: 24px; }

タグを複数行に並べる

文字数の異なるタグへwrapを使うと、各タグの幅を保ったまま利用できる幅に合わせて並べられます。

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

狭い画面だけ折り返しを許可する

広い画面では1行を保ち、メディアクエリーで狭い画面だけwrapへ切り替えられます。

@media (max-width: 48rem) { .toolbar { flex-wrap: wrap; } }

ポイント

wrapだけでは項目の幅は決まらない。

折り返しが起きるには、フレックスコンテナーの主軸方向に限られた大きさがあり、項目がその中へ収まりきらない必要があります。項目側のwidthやflex-basis、flex-shrinkも折り返す位置に影響します。wrap-reverseが反転するのは行を積み重ねる交差軸の向きで、各行の中の項目順ではありません。flex-wrapはフレックスコンテナーに適用され、子要素へ継承されません。