TailwindCSS flex grid 使い分け｜どっちを使う？迷った私が辿り着いた答え【体験談】

TailwindCSS flex grid 使い分けで悩んでいませんか？「flexとgrid、どっちを使えばいいの？」と迷った経験がある方も多いのではないでしょうか。

この記事では、私自身がflexとgridの使い分けで迷い、試行錯誤の末に辿り着いた答えをお伝えします。justifyとitemsの違いについても、実体験をもとに解説します。

---

【体験談】flexとgridで迷った話

本題に入る前に、少しだけ私の話をさせてください。

私はIT業界20年以上ですが、ずっと組み込み・制御系の仕事をしてきました。フロントエンドは完全に畑違いです。

そんな私がTailwindCSSを学び始めたとき、flexとgridの違いがまったくわからなかったんです。

具体的に迷った場面

例えば、こんな場面で迷いました：

• ボタンを横並びにしたいとき
• 左側にタイトル、右側にボタンを配置したいとき

「これ、flexで書くの？gridで書くの？」

公式ドキュメントを読んでも、頭に入ってこない。有識者に聞こうにも、そこまで時間を取ってもらえない。

結局、有識者の書いたコードを見て、真似してflexを使った。それで動いたから、とりあえずOKとした。

でも、「なぜflexなのか」は理解できていませんでした。

---

私が辿り着いた使い分けの答え

試行錯誤を繰り返した結果、私はこういう理解に辿り着きました。

結論：こう使い分ける

場面	使うもの
等間隔で並べたい（カードなど）	grid
両端に寄せる、片方に寄せる	flex

gridを使う場面

カードを等間隔で並べたいとき。

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">カード1</div>
  <div class="bg-gray-200 p-4">カード2</div>
  <div class="bg-gray-200 p-4">カード3</div>
</div>

Tailwind Play で上記コードを実行した結果

• grid-cols-3：3列で並べる
• gap-4：カード間の余白

gridは「決まった列数で、等間隔に並べる」ときに便利です。

参考：Grid Template Columns - Tailwind CSS

flexを使う場面

左側にタイトル、右側にボタンを配置したいとき。

<div class="flex justify-between items-center">
  <h2 class="text-xl font-bold">タイトル</h2>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">ボタン</button>
</div>

Tailwind Play で上記コードを実行した結果

• flex：横並びにする
• justify-between：両端に寄せる
• items-center：縦方向の中央揃え

flexは「両端に寄せる」「片方に寄せる」など、柔軟な配置をしたいときに便利です。

参考：Flexbox - Tailwind CSS

---

もう一つの壁：justifyとitemsの違い

flexを使い始めると、次の壁にぶつかりました。

「justifyとitems、何が違うの？」

私が迷ったこと

• justify-centerとitems-centerの違いがわからない
• justify-betweenって何？
• flex-rowとflex-colで挙動が変わる？

公式ドキュメントを読んでも、正直よくわからなかった。

試行錯誤の結果、辿り着いた理解

何度も書いて、試して、ようやくこう理解しました：

プロパティ	方向	説明
justify-*	横方向（主軸）	横の配置を決める
items-*	縦方向（交差軸）	縦の配置を決める

<div class="flex justify-center items-center h-32 bg-gray-100">
  <p>中央に配置</p>
</div>

Tailwind Play で上記コードを実行した結果

• justify-center：横方向の中央
• items-center：縦方向の中央
• 両方指定すると、完全な中央配置になる

flex-row/flex-colで軸が変わる

ここがややこしいポイントです。

flex-row（デフォルト）の場合：

• justify → 横方向
• items → 縦方向

flex-colの場合：

• justify → 縦方向（軸が入れ替わる）
• items → 横方向（軸が入れ替わる）

<!-- flex-col の場合 -->
<div class="flex flex-col justify-center items-center h-64">
  <p>縦に並ぶ</p>
  <p>中央配置</p>
</div>

Tailwind Play で上記コードを実行した結果

最初は混乱しましたが、「主軸の方向が変わる」と理解してからは、スッと頭に入りました。

参考：Justify Content - Tailwind CSS
参考：Align Items - Tailwind CSS

---

まとめ

TailwindCSSのflexとgridの使い分け、私が辿り着いた答えはこうです：

flexとgridの使い分け：

• 等間隔で並べたい → grid
• 両端・片方に寄せる → flex

justifyとitemsの違い：

• justify → 横方向（主軸）
• items → 縦方向（交差軸）
• flex-row/flex-colで軸が入れ替わる

最初は迷いましたが、実際に手を動かして試行錯誤することで理解できました。

他のトラブルも解決したい方へ

他のレイアウトトラブルも解決したい方は、30パターンをまとめた逆引きガイドをご覧ください。

TailwindCSS レイアウト逆引きガイド｜よくあるトラブル30選

TailwindCSS レイアウト 効かない原因と解決策を30パターンで網羅。Flexbox、Grid、position、サイズ指定など、カテゴリ別に整理した逆引きリストで、あなたの「効かない」をすぐ ...

続きを見る

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

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

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

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

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

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

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

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