ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flexアイテムの折り返し!flex-wrapの使い方を解説

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

HTML/CSS

2022/04/11

2023/05/06

flex-wrap記事サムネイル

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

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

 

flex-wrapの解説画像

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

この記事で身につく内容
  • flex-wrap とは
  • flex-wrap で使用できる値
  • flex-wrap の基本形
  • flex-wrap の使い方

ZeroPlus Gateについて

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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

 

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-wrap: wrap;の出力結果サンプル

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

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

ZeroPlusgate50教材の動画

 

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%;
}

出力結果

flex-wrap: wrap;の出力結果

 

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%;
}

出力結果

flex-wrap: wrap-reverse;の出力結果

 

flex-wrapが効かない原因

flex-wrap を使用しても、思い通りに折り返しが実装されずに苦戦してしまうことがよくあります。そのようなときには以下のような原因が考えられるので、見直してみましょう。

こflex-wapが効かない原因
  • 親要素に display: flex; を指定していない
  • 親要素に flex-wrap を指定していない
  • 親要素に横幅を指定していない
  • 子要素が親要素の幅を超えない

 

親要素にdisplay: flex;を指定していない

親要素に display: flex; を指定していない場合、flex-wrap が適用されません。flex-wrap はflexアイテムに対して有効なプロパティなので、dispaly: flex; の指定を忘れないようにしましょう。

横並びをインライン要素やインラインブロック要素、もしくは float で実装している場合は display: flex; での横並びに変更してみてください。

親要素にflex-wrapを指定していない

flex-wrap は、親要素(flexコンテナ)に指定するプロパティです。子要素に直接指定してもスタイルが適用されないことに注意しましょう。

親要素に横幅を指定していない

親要素に横幅を指定していないときも flex-wrap は適用されません。flex-wrap で折り返しを実装したい場合は親要素に横幅を指定しましょう。

親要素の端が折り返し点になるので、どこで折り返すのかを指定することもできます。

子要素が親要素の幅を超えない

子要素の数が少なく、親要素の幅を超えない場合は折り返されません。子要素の数を増やすか、親要素の横幅を小さくすることで折り返しを実装できます。

まとめ

flexアイテムが親要素の幅からはみ出るときは flex-wrap を指定してflexアイテムを折り返してみましょう。flexアイテムが親要素の幅内に収まれば、レイアウトが崩れる悩みを解決できます。

flex-wrapの解説画像

flex-wrapまとめ

  • flexアイテムの折り返しを指定するプロパティ
  • display: flex; と併用する
  • 折り返さない・通常の折り返し・逆順の折り返しが可能
ZeroPlus Gateについて

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから