ブログ投稿日時：
ブログ更新日時：
flex-wrapについて解説
1.
flex-wrap とは
flex-wrapは子要素の折り返しを指定するプロパティです。
2.
flex-wrap の指定方法
flex-wrap で使える値は下記の3つです。
nowrap（初期値）… 子要素を折り返さず、1行に並べる
wrap … 子要素を折り返し、複数行に上から下へ並べる
wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる
それではそれぞれの指定方法と表示を見ていきましょう。
flex-wrap: nowrap; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>.items {
display: flex;
flex-wrap: nowrap;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
6
上記のように flex-wrap: nowrap; を指定すると子要素は折り返さず、1行に並べます。
flex-wrap: wrap; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>.items {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
6
上記のように flex-wrap: wrap; を指定すると子要素を折り返し、子要素を上から下に並べます。
flex-wrap: wrap-reverse; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>.items {
display: flex;
flex-wrap: wrap-reverse;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
6
上記のように flex-wrap: wrap-reverse; を指定すると子要素を折り返し、子要素を下から上に並べます。
3.
今回のまとめ
この記事では flex-wrap について解説しました。
flex-wrap の初期値は nowrap なので wrap や wrap-reverse を指定しないと子要素を折り返してくれないので注意が必要ですね。
最後までお読みいただきありがとうございます。