dev TailwindCSS

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>
gridで等間隔に並べた例
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>
flexで両端に寄せた例
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>
justify-centerとitems-centerで中央配置
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>
flex-colで縦に並べて中央配置
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で軸が入れ替わる

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

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

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

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

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

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

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

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

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

-dev, TailwindCSS