CSS ・ Flexbox・Grid
flex-wrap
アイテムの折り返し
Flexbox で、子要素が親の幅に収まらないときに、折り返して次の行に並べるかどうかを指定します。
01
サンプルコード
HTML
1<p>nowrap（初期値）</p>
2<div class="flex">
3 <div class="item">1</div>
4 <div class="item">2</div>
5 <div class="item">3</div>
6 <div class="item">4</div>
7 <div class="item">5</div>
8</div>
9<p>wrap</p>
10<div class="flex wrap">
11 <div class="item">1</div>
12 <div class="item">2</div>
13 <div class="item">3</div>
14 <div class="item">4</div>
15 <div class="item">5</div>
16</div>
CSS
1p {
2 margin: 0 0 4px;
3 font-size: 13px;
4}
5.flex {
6 display: flex;
7 gap: 6px;
8 width: 260px;
9 margin-bottom: 12px;
10 padding: 6px;
11 border: 1px dashed #999;
12}
13.wrap {
14 flex-wrap: wrap;
15}
16.item {
17 flex-shrink: 0;
18 width: 70px;
19 padding: 8px 0;
20 text-align: center;
21 background: #b68235;
22 color: #fff;
23}
02
実行結果
ブラウザでの表示nowrap では枠からはみ出し、wrap では収まらない分が次の行に回ります
03
解説
flex-wrap は、display: flex を指定した親要素に書き、子要素の折り返しを決めます。
初期値の nowrap では、子要素は折り返さずに一列に並びます。幅が足りなければ子要素が縮み、縮めきれないと親からはみ出します。
wrap にすると、収まらない子要素が次の行に回ります。カード一覧やタグ一覧など、数が増えても複数行で並べたいときに使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
nowrap | 子要素を折り返さずに一列に配置（初期値） |
wrap | 複数行のアイテムを上から下へと配置 |
wrap-reverse | 複数行のアイテムを下から上へと配置 |
flex-flow: row wrap; | flex-direction と flex-wrap をまとめて指定する一括指定 |
カードを3列で並べ、4枚目から次の行へ
子要素の幅を決めて wrap を指定すると、決まった列数で折り返します。行の間隔は gap で付けます。
CSS
1.cards {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 24px;
5}
6.card {
7 width: calc((100% - 48px) / 3);
8}
注意点
- 01flex-wrap は子要素ではなく、display: flex を指定した親要素に書きます。
- 02折り返したときの行どうしの間隔は gap（row-gap）で指定します。複数行全体の位置は align-content で調整できます。