Flexboxの折り返しを理解しよう｜flex-wrapとwrap-reverseの違いから、レスポンシブ対応まで

Flexboxの使い方に慣れてくると、次に多くの人がぶつかるのがこの悩みです。

「カードが横に並びきらずに崩れる…」
「ボタンが画面幅からはみ出してしまう…」

その原因の多くは、flex-wrap の理解不足にあります。
この記事では、flex-wrapの仕組みからwrap-reverseとの違い、そしてレスポンシブデザインへの応用までを一気に整理して解説します。

flex-wrapとは？

flex-wrap は、Flexboxで要素が横に並びきらないとき、折り返すかどうかを決めるプロパティです。

.parent {
  display: flex;
  flex-wrap: wrap;
}

通常、Flexboxの子要素は1行に詰め込まれますが、wrapを指定することで、
親の幅に収まらない要素が自動的に次の行に折り返されるようになります。

flex-wrapの3つの値と挙動

値	意味	挙動イメージ
nowrap	折り返さない（初期値）	要素が親幅を超えても1行に詰め込む
wrap	折り返す（下方向）	幅が足りない場合は次の行に移動
wrap-reverse	折り返す（上方向）	折り返すが、下ではなく上に行く

　コード例：3つの違いを見てみよう

<div class="parent nowrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.parent {
  display: flex;
  width: 400px;
}

.box {
  width: 150px;
  height: 100px;
  margin: 5px;
  background: #00bcd4;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nowrap { flex-wrap: nowrap; }       /* 折り返さない（はみ出す） */
.wrap { flex-wrap: wrap; }           /* 折り返して下に続く */
.wrap-reverse { flex-wrap: wrap-reverse; } /* 折り返して上に続く */

👉

nowrap → 横幅を超えると要素がはみ出す

wrap → 右端で折り返して次の行に

wrap-reverse → 下ではなく上に折り返す（少しレアケース）

下の段から始まるのだけど、左から１，２，３，４，５，６の順番になる。

（右下から１，２，３…ではない。※結構勘違いしている人が多い。）

レスポンシブデザインでの活用

flex-wrap は、画面サイズに応じて要素を自然に折り返すための基本テクニックです。
特にカード型レイアウトやボタン群など、横幅に収まりきらない要素を調整するのに最適です。

　例：カードを自動で折り返すレスポンシブ配置

<div class="card-list">
  <div class="card">Card1</div>
  <div class="card">Card2</div>
  <div class="card">Card3</div>
  <div class="card">Card4</div>
  <div class="card">Card5</div>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.card {
  flex: 1 1 calc(33.333% - 16px);
  background: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 16px); /* 2列に */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%; /* 1列に */
  }
}

これで、

PC：3列
タブレット：2列
スマホ：1列

という自然な折り返しが実現します。

wrapとjustify-contentの組み合わせ

flex-wrap は justify-content とセットで使うと、
折り返したときの行ごとの見た目をきれいに整えられます。

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 各行を中央寄せに */
  gap: 20px;
}

プロパティ	効果
justify-content: center;	各行を中央寄せ
space-between	各行で左右端を揃える
space-around	各要素の周りに均等な余白
space-evenly	行ごとに完全均等配置

wrap-reverseはどんなときに使う？

wrap-reverse は、折り返す方向を逆にするプロパティです。
通常（wrap）は「上 → 下」に積み重なりますが、wrap-reverse では「下 → 上」に並びます。

これは、独自のデザイン効果やコンテンツの優先度を上に表示したい場合などに使われます。

.parent {
  display: flex;
  flex-wrap: wrap-reverse;
  height: 200px;
}

上の行が下に、下の行が上に移動するような反転配置になります。
ただし、一般的なレイアウトではあまり使われないため、効果的な場面を選びましょう。

よくある失敗とその解決法

トラブル	原因	対処法
要素が横にあふれる	flex-wrap が nowrap のまま	flex-wrap: wrap; に変更
折り返したのに詰まりすぎる	gap 未指定	gap プロパティで余白を設定
折り返した行がバラバラ	justify-content 未設定	各行の位置揃えを明示的に指定

まとめ｜Flexboxを“行ごと”に制御できるのがwrapの強み

Flexboxの「軸」でレイアウトを制御できるようになったら、
次のステップは「行を増やしても崩れないレイアウト」を作ること。

flex-wrap はまさにそのカギです。
justify-content、align-items と組み合わせることで、
レスポンシブにも強い柔軟なデザインを実現できます。