ZeroPlus Media > L_HTML/CSS > Step6 > 【CSS】flexアイテムの折り返し！flex-wrapの使い方を解説

【CSS】flexアイテムの折り返し！flex-wrapの使い方を解説

2023/07/19

flexアイテムを折り返すには、flex-wrapプロパティを使用します。flex-wrap は親要素に横幅を指定しているときやレスポンシブ対応などの場面で有用ですので、学習してみましょう。

display: flex; で要素を横並びにするとき、子要素の幅が大きかったり要素の数が多かったりすると親要素の幅からはみ出てしまうことがあります。そのようなときは、要素を折り返して配置すれば綺麗なレイアウトを作成できます。

この記事では flex-wrap の使い方を解説します。要素の折り返しをマスターして、レイアウト作成を効率よく行なっていきましょう。

この記事で身につく内容

flex-wrap とは
flex-wrap で使用できる値
flex-wrap の基本形
flex-wrap の使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Flexboxについて全体的に詳しく知りたい！という方向けに、こちらの記事でFlexboxで使用するプロパティや実践的な使い方を解説しています。ぜひ参考にしてください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

flex-wrapとは
flex-wrapの使い方
flex-wrapで使用できる値
flex-wrapが効かない原因
まとめ

flex-wrapとは

flex-wrap は、flexアイテムの折り返しを指定するプロパティです。以下のような場面でよく使われます。

flexアイテムの数が多く、親要素の幅からはみ出してしまうとき
flexアイテムを折り返して、きれいに並べたいとき
flexアイテムを折り返さずにはみ出させたいとき

それぞれの使い分けは、次項で解説する値と一緒に覚えておきましょう。

flex-wrapの使い方

flex-wrap はflexアイテムに対して使用するため、display: flex; と併用して親要素（flexコンテナ）に指定します。

以下がCSSの基本形です。

.flexbox {
  display: flex;
  flex-wrap: 値;
}

flex-wrapで使用できる値

flex-wrap では、以下の値を使用してflexアイテムの折り返しを指定します。通常の折り返し・逆順での折り返し・折り返さないという指定ができます。

flex-wrapの値

nowrap（初期値）…折り返さない
wrap …折り返す
wrap-reverse …逆順で折り返す

nowrap - flexアイテムを折り返さない

flex-wrap: nowrap; は、flexアイテムを折り返さない指定です。

以下が記述例です。

HTMLの記述

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  flex-wrap: nowrap;/*flexアイテムを折り返さない*/
  border: 1px solid #000;
  width: 50%;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 25%;
}

出力結果

親要素（flexコンテナ）の横幅は50%、子要素（flexアイテム）の横幅はそれぞれ25%に指定していますが、子要素は折り返されず横一列に並んでいます。

ここで注意が必要なのが、flexアイテムを親要素の幅からはみ出させたいときの指定です。

flexアイテムを折り返さず、かつ親要素の幅からはみ出させたいときには、flex-wrap: nowrap; と flex-shrink: 0; をflexアイテムに指定しましょう。

HTMLの記述

<ul class="flexbox">
  <li class="flex-item">①</li>
  <li class="flex-item">②</li>
  <li class="flex-item">③</li>
</ul>

CSSの記述

.flexbox {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #000;
  width: 50%;
  text-align: center;
}

.flex-item {
  flex-shrink: 0;/*追記*/
  background: orange;
  width: 250px;
  height: 200px;
  margin: 10px;
  font-size: 50px;

/*flexアイテムのテキストを中央に配置する指定*/
  display: flex;
  justify-content: center;
  align-items: center;
}

出力結果

flex-wrap: nowrap; を指定すればflexアイテムは親要素の幅を超えても折り返さないようになりますが、この場合flexアイテムが縮小され、flexアイテムの全体が親要素の幅内に収まるように調整されます。

これは flex-shrink の初期値が1であり、flexアイテムは自動的に収縮する性質を持つためです。

wrap - flexアイテムを折り返す

flex-wrap: wrap; はflexアイテムを折り返す指定です。flexアイテムが親要素からはみ出る場合、はみ出た部分を折り返します。

以下が記述例です。

HTMLの記述

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 25%;
}

出力結果

wrap-reverse - 逆順で折り返す

flex-wrap: wrap-reverse; は、flexアイテムを逆順に折り返す指定です。flexアイテムの起点が左下になり、親要素からはみ出た部分は左上から配置されます。

以下が記述例です。

HTMLの記述

<div class="flexbox">
  <div class="flex-item01">①</div>
  <div class="flex-item02">②</div>
  <div class="flex-item03">③</div>
  <div class="flex-item04">④</div>
  <div class="flex-item05">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  flex-wrap: wrap-reverse;
  text-align: center;
}

.flex-item{
  background: orange;
  border: 1px solid #000;
  width: 25%;
}

出力結果