TailwindCSS flex-wrap 効かない？3つの原因と解決テクニック

TailwindCSS flex-wrap で要素が折り返さない、列数が合わない…そんな悩みを解決する3つのテクニックを紹介します。flex-wrap + basis の組み合わせや、grid との使い分けまで、実践的に解説します。

この問題、見覚えありませんか？

この記事で得られる知識

TailwindCSS flex-wrap を使ったレイアウトで、よくある3つの躓きポイントとその解決方法を学べます。

• basis と gap の関係 — なぜ basis-1/2 で2列にならないのか
• flex-wrap のデフォルト動作 — なぜ折り返さないのか
• flex-wrap vs grid の使い分け — どちらを選ぶべきか

この記事を読めば、flex-wrap を使ったレイアウトで迷うことがなくなります。

---

【体験談】私も同じ誤解をしました

正直に言うと、私もこの記事で紹介する3つのテクニックについて、最初は同じ誤解をしていました。

特にテクニック1の「basis-1/2 なのに2列にならない」問題。公式ドキュメントを見て basis-1/2 を設定すれば50%の幅になると思い込んでいたのですが、gap を追加した途端に1列になってしまい、「なぜ？」と悩みました。

実際に試してみて初めて「gap の分だけ100%を超えてしまうのか」と理解できました。同じ悩みを持つ方の参考になれば幸いです。

---

テクニック1：basis-1/2 を設定したのに2列にならない

よくある誤解

公式ドキュメント（https://tailwindcss.com/docs/flex-basis）を見ると、basis-1/2 や basis-1/3 といった分数値の例が載っています。

「basis-1/2 を設定すれば親の50%の幅になる」と理解して、2列レイアウトを作ろうとします。ところが、gap を追加すると…

なぜか1列になってしまいます。

NGコード

<div class="flex flex-wrap gap-4">
  <div class="basis-1/2 bg-white p-4 rounded">カード1</div>
  <div class="basis-1/2 bg-white p-4 rounded">カード2</div>
  <div class="basis-1/2 bg-white p-4 rounded">カード3</div>
  <div class="basis-1/2 bg-white p-4 rounded">カード4</div>
</div>

原因

basis-1/2 は「親の50%」ですが、gap-4（16px）を追加すると、50% + 50% + 16px = 100% + 16px となり、1行に収まらなくなります。結果として、各要素が1行ずつに折り返されてしまいます。

OKコード

<div class="flex flex-wrap gap-4">
  <div class="basis-[calc(50%-0.5rem)] bg-white p-4 rounded">カード1</div>
  <div class="basis-[calc(50%-0.5rem)] bg-white p-4 rounded">カード2</div>
  <div class="basis-[calc(50%-0.5rem)] bg-white p-4 rounded">カード3</div>
  <div class="basis-[calc(50%-0.5rem)] bg-white p-4 rounded">カード4</div>
</div>

gap-4（16px = 1rem）の半分である 0.5rem を各要素から引くことで、ちょうど100%に収まり、2列になります。

ポイント

flex-wrap + basis で列数を固定したいときは、gap の分を calc で引きましょう。

---

テクニック2：flex で折り返しを設定したのに折り返さない

よくある誤解

公式ドキュメント（https://tailwindcss.com/docs/flex）を見て、flex で要素を横並びにできると理解します。

「要素が多くなれば自動で折り返すだろう」と思い込んで実装すると…

要素が親からはみ出して、折り返しません。

NGコード

<div class="flex gap-4">
  <div class="w-32 bg-white p-4 rounded shrink-0">カード1</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード2</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード3</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード4</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード5</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード6</div>
</div>

原因

flexbox のデフォルトは flex-wrap: nowrap（折り返さない）です。明示的に指定しない限り、要素は1行に並び続けます。

OKコード

<div class="flex flex-wrap gap-4">
  <div class="w-32 bg-white p-4 rounded shrink-0">カード1</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード2</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード3</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード4</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード5</div>
  <div class="w-32 bg-white p-4 rounded shrink-0">カード6</div>
</div>

flex-wrap を追加するだけで、親の幅に収まるように折り返します。

ポイント

flex で折り返したいときは、flex-wrap を忘れずに追加しましょう。

---

テクニック3：レスポンシブで列数を変えたいが複雑になる

よくある誤解

テクニック1で学んだ calc を使って、レスポンシブ対応（モバイル1列、タブレット2列、PC3列）しようとします。

<div class="flex flex-wrap gap-4">
  <div class="basis-full md:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.67rem)]">
    カード
  </div>
</div>

コードが長く、calc の計算も複雑で保守しづらくなります。

原因

flex-wrap + basis で列数を固定する場合、gap の計算が必要になり、コードが複雑になります。

OKコード（grid を使用）

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded">カード1</div>
  <div class="bg-white p-4 rounded">カード2</div>
  <div class="bg-white p-4 rounded">カード3</div>
</div>

grid なら gap を気にせず、シンプルに列数を指定できます。

flex-wrap と grid の使い分け

用途	推奨
列数を固定したいレイアウト	grid
幅が不定の要素を自然に折り返す（タグ一覧など）	flex-wrap

ポイント

列数を固定したいレスポンシブレイアウトには、flex-wrap より grid を使いましょう。

---

まとめ

TailwindCSS flex-wrap でよくある3つの躓きポイントを紹介しました。

• テクニック1: basis + gap で列数が崩れる → calc で gap を引く
• テクニック2: 折り返さない → flex-wrap を追加する
• テクニック3: レスポンシブで複雑になる → grid を使う

flex-wrap は便利ですが、用途によっては grid の方が適している場合もあります。それぞれの特性を理解して、使い分けていきましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）