メインコンテンツまでスキップ

Flexbox レイアウト

この章では、Tailwind CSS で Flexbox レイアウトを構築する方法を学びます。

Flex コンテナの作成​

flex クラスで Flex コンテナを作成します。

<div class="flex">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

インライン Flex​

<span class="inline-flex">...</span>

方向 (flex-direction)​

クラス方向
flex-row左から右 (デフォルト)
flex-row-reverse右から左
flex-col上から下
flex-col-reverse下から上
<!-- 縦並び -->
<div class="flex flex-col">
  <div>上</div>
  <div>中</div>
  <div>下</div>
</div>

<!-- 横並び (逆順) -->
<div class="flex flex-row-reverse">
  <div>右端に表示</div>
  <div>中央に表示</div>
  <div>左端に表示</div>
</div>

折り返し (flex-wrap)​

クラス動作
flex-wrap折り返す
flex-nowrap折り返さない (デフォルト)
flex-wrap-reverse逆方向に折り返す
<div class="flex flex-wrap">
  <div class="w-1/3">1</div>
  <div class="w-1/3">2</div>
  <div class="w-1/3">3</div>
  <div class="w-1/3">4</div>  <!-- 次の行へ -->
</div>

主軸の配置 (justify-content)​

クラス配置
justify-start開始位置
justify-end終了位置
justify-center中央
justify-between両端揃え (間隔均等)
justify-around均等配置 (両端に余白)
justify-evenly完全均等配置
<!-- 中央揃え -->
<div class="flex justify-center">
  <div>中央に配置</div>
</div>

<!-- 両端揃え -->
<div class="flex justify-between">
  <div>左端</div>
  <div>右端</div>
</div>

<!-- 均等配置 -->
<div class="flex justify-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

交差軸の配置 (align-items)​

クラス配置
items-start開始位置
items-end終了位置
items-center中央
items-baselineベースライン揃え
items-stretch伸縮 (デフォルト)
<!-- 垂直中央揃え -->
<div class="flex items-center h-32 bg-gray-100">
  <div>垂直中央</div>
</div>

<!-- 完全中央揃え -->
<div class="flex items-center justify-center h-screen">
  <div>画面中央</div>
</div>

個別アイテムの配置 (align-self)​

クラス配置
self-auto親の設定に従う
self-start開始位置
self-end終了位置
self-center中央
self-stretch伸縮
<div class="flex items-start h-32 bg-gray-100">
  <div>開始位置</div>
  <div class="self-center">中央</div>
  <div class="self-end">終了位置</div>
</div>

伸縮 (flex-grow / flex-shrink)​

クラス動作
grow余白を埋める
grow-0伸びない
shrink縮む
shrink-0縮まない
<!-- 中央のアイテムが余白を埋める -->
<div class="flex">
  <div class="w-20">固定幅</div>
  <div class="grow">残りを埋める</div>
  <div class="w-20">固定幅</div>
</div>

基準サイズ (flex-basis)​

クラスサイズ
basis-00
basis-1/425%
basis-1/250%
basis-full100%
basis-auto自動
<div class="flex">
  <div class="basis-1/4">25%</div>
  <div class="basis-1/2">50%</div>
  <div class="basis-1/4">25%</div>
</div>

basis-* は Flex コンテキスト内での初期サイズを指定します。w-* と似ていますが、basis-* は flex-grow / flex-shrink の計算基準となる点が異なります。Flex レイアウト内では w-* よりも basis-* を使うことで、意図通りの伸縮が行われます。

ショートハンド (flex)​

クラス意味
flex-1flex: 1 1 0% (均等に伸縮)
flex-autoflex: 1 1 auto
flex-initialflex: 0 1 auto
flex-noneflex: none (固定)
<!-- 均等幅 -->
<div class="flex">
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
</div>
flex-1 と flex-auto の違い

flex-1 と flex-auto の違いに注意してください。flex-1 は flex-basis: 0% のためコンテンツの大きさに関係なく均等に分割されます。一方 flex-auto は flex-basis: auto のためコンテンツの大きさを考慮した上で残りスペースを分配します。均等な幅にしたい場合は flex-1 を使いましょう。

間隔 (gap)​

gap クラスでアイテム間の間隔を設定します。

<div class="flex gap-4">
  <div>間隔 16px</div>
  <div>間隔 16px</div>
  <div>間隔 16px</div>
</div>

<!-- 横と縦で異なる間隔 -->
<div class="flex flex-wrap gap-x-4 gap-y-2">
  <div>横 16px、縦 8px</div>
  ...
</div>

順序 (order)​

クラス順序
order-first-9999
order-last9999
order-none0
order-1 〜 order-121〜12
<div class="flex">
  <div class="order-3">3 番目に表示</div>
  <div class="order-1">1 番目に表示</div>
  <div class="order-2">2 番目に表示</div>
</div>

実践例​

ナビゲーションバー​

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-6">
    <a href="#" class="hover:text-blue-500">Home</a>
    <a href="#" class="hover:text-blue-500">About</a>
    <a href="#" class="hover:text-blue-500">Contact</a>
  </div>
</nav>

カードレイアウト​

<div class="flex flex-col h-full bg-white rounded-lg shadow-sm">
  <img src="..." class="rounded-t-lg" />
  <div class="flex-1 p-4">
    <h3 class="font-bold">タイトル</h3>
    <p class="text-gray-600">説明文...</p>
  </div>
  <div class="p-4 border-t border-gray-200">
    <button class="w-full py-2 bg-blue-500 text-white rounded-sm">
      詳細を見る
    </button>
  </div>
</div>

入力フォーム​

<div class="flex">
  <input
    type="text"
    class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-hidden"
    placeholder="検索..."
  />
  <button class="px-4 py-2 bg-blue-500 text-white rounded-r-lg">
    検索
  </button>
</div>

まとめ​

  • flex で Flex コンテナを作成
  • justify-* で主軸、items-* で交差軸の配置
  • grow / shrink で伸縮を制御
  • gap でアイテム間隔を設定
  • レスポンシブと組み合わせて柔軟なレイアウトを実現

次に読む​