しなやかに配置を操る｜第2回 FlexboxとGrid入門

著者: 管理者 / 2025-08-13 (更新: 2025-08-13)

🌸 導入

前回は、Tailwind CSSの「基礎の基礎」を体験いたしましたわね。
小さなユーティリティクラスを積み重ねて、まるでお菓子を盛り付けるようにデザインできることを学びました🍰

今回はさらに一歩進んで、Flexbox と Grid をTailwindで使いこなし、レイアウトを優雅に整える方法を学んでまいりましょう。

エレガントに学ぶTailwind CSS｜第1回基礎の基礎入門

わたくし……正直に申し上げますと、FlexboxもGridも名前は聞いたことがございますけれど、使いこなせておりませんの 😥

安心してください。Tailwindを使えば、複雑なレイアウトでも直感的に書けます。まずはFlexboxから始めてみましょう。

📝 解説：TailwindでFlexboxを使う

Flexboxは「要素を横並び・縦並びにする」ための強力な仕組みです。Tailwindでは以下のように使います。

<div class="flex">
  <div class="bg-red-300 p-4">A</div>
  <div class="bg-green-300 p-4">B</div>
  <div class="bg-blue-300 p-4">C</div>
</div>

flex → 子要素を横並びにする
各子要素に p-4 などを指定して見やすく調整

➡️ 結果：A, B, C が横並びになります。

まあ！わたくし、CSSで `display: flex;` を書かなくても、クラス一つで横並びにできるなんて感動いたしましたわ ✨

ええ。そしてFlexboxの強みは「並べ方を自在に変えられる」ことです。

📝 解説：Flexboxでよく使うTailwindクラス

flex-row → 横並び（デフォルト）
flex-col → 縦並び
justify-center → 横方向で中央寄せ
justify-between → 左右に均等配置
items-center → 縦方向の中央揃え

<div class="flex justify-between items-center bg-gray-100 p-4">
  <span>左側</span>
  <span>右側</span>
</div>

➡️ 左にテキスト、右にテキストを配置できます。

わたくし、まるでテーブルセッティングを美しく並べるような気分ですわ 🍽️

良い例えですね。次は「Grid」を見てみましょう。こちらは「マス目の配置」に便利です。

📝 解説：TailwindでGridを使う

Gridは「行と列」で構成されたレイアウトを簡単に作れる仕組みです。

<div class="grid grid-cols-3 gap-4">
  <div class="bg-pink-200 p-4">1</div>
  <div class="bg-pink-300 p-4">2</div>
  <div class="bg-pink-400 p-4">3</div>
  <div class="bg-pink-500 p-4">4</div>
  <div class="bg-pink-600 p-4">5</div>
  <div class="bg-pink-700 p-4">6</div>
</div>