EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS Flexboxレイアウト：柔軟なコンテナと配置制御

Flexコンテナと方向

Flexboxは1次元のレイアウトモデルです。display: flexでflexコンテナを作成し、方向クラスで子要素の配置方法を制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexコンテナと方向デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-row 水平レイアウト -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row（デフォルト）</h3>
      <div class="flex flex-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">アイテム 1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">アイテム 2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">アイテム 3</div>
      </div>
    </div>

    <!-- flex-col 垂直レイアウト -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col</h3>
      <div class="flex flex-col gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">アイテム 1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded text-center">アイテム 2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded text-center">アイテム 3</div>
      </div>
    </div>

    <!-- flex-row-reverse 逆順水平 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row-reverse</h3>
      <div class="flex flex-row-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">アイテム 1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">アイテム 2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">アイテム 3</div>
      </div>
    </div>

    <!-- flex-col-reverse 逆順垂直 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col-reverse</h3>
      <div class="flex flex-col-reverse gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-orange-500 text-white px-4 py-2 rounded text-center">アイテム 1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded text-center">アイテム 2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded text-center">アイテム 3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Flex方向クラスリファレンス：

クラス CSS 値 説明
flex-row flex-direction: row 水平レイアウト（デフォルト）
flex-row-reverse flex-direction: row-reverse 逆順水平レイアウト
flex-col flex-direction: column 垂直レイアウト
flex-col-reverse flex-direction: column-reverse 逆順垂直レイアウト

従来のCSSとTailwindの比較 従来の方法ではCSSでdisplay: flexとflex-directionプロパティを設定する必要がありますが、Tailwindはflex、flex-row、flex-colなどのクラス名をHTML内で直接使用できます。

💡 ヒント： flex-rowはデフォルトの方向で省略できます。flexでコンテナを作成すると、子要素はデフォルトで水平に配置されます。

Flex Wrap

デフォルトでは、flexアイテムはコンテナに合わせて縮小します。flex-wrapを使用すると、アイテムを複数行に折り返すことができます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Wrapデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-nowrap 折り返しなし -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-nowrap（デフォルト）</h3>
      <div class="flex flex-nowrap gap-4 bg-gray-100 p-4 rounded overflow-x-auto">
        <div class="bg-blue-500 text-white px-6 py-4 rounded flex-shrink-0 w-48">アイテム 1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded flex-shrink-0 w-48">アイテム 2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded flex-shrink-0 w-48">アイテム 3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded flex-shrink-0 w-48">アイテム 4</div>
        <div class="bg-blue-900 text-white px-6 py-4 rounded flex-shrink-0 w-48">アイテム 5</div>
      </div>
    </div>

    <!-- flex-wrap 折り返しあり -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-48">アイテム 1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-48">アイテム 2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-48">アイテム 3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-48">アイテム 4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-48">アイテム 5</div>
      </div>
    </div>

    <!-- flex-wrap-reverse 逆順折り返し -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap-reverse</h3>
      <div class="flex flex-wrap-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-6 py-4 rounded w-48">アイテム 1</div>
        <div class="bg-purple-600 text-white px-6 py-4 rounded w-48">アイテム 2</div>
        <div class="bg-purple-700 text-white px-6 py-4 rounded w-48">アイテム 3</div>
        <div class="bg-purple-800 text-white px-6 py-4 rounded w-48">アイテム 4</div>
        <div class="bg-purple-900 text-white px-6 py-4 rounded w-48">アイテム 5</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSでflex-wrap: wrapを設定する必要がありますが、Tailwindはflex-wrapクラスを直接使用できます。デフォルトではflex-nowrapが折り返しを防ぎます。

⚠️ 注意： flex-nowrapを使用すると、アイテムがコンテナからあふれる可能性があります。overflow-x-autoと組み合わせるか、flex-wrapで折り返しを許可することを推奨します。

主軸配置（justify）

justify-*クラスはflexアイテムの主軸に沿った配置を制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主軸配置デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-start</h3>
      <div class="flex justify-start gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-center</h3>
      <div class="flex justify-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-end</h3>
      <div class="flex justify-end gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-between</h3>
      <div class="flex justify-between bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-around</h3>
      <div class="flex justify-around bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-evenly</h3>
      <div class="flex justify-evenly bg-gray-100 p-4 rounded">
        <div class="bg-teal-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-teal-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-teal-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

主軸配置クラスリファレンス：

クラス CSS 値 説明
justify-start justify-content: flex-start 開始位置に配置
justify-center justify-content: center 中央揃え
justify-end justify-content: flex-end 終了位置に配置
justify-between justify-content: space-between アイテム間の間隔が均等
justify-around justify-content: space-around 各アイテムの両側に等しい間隔
justify-evenly justify-content: space-evenly すべてのアイテム間が等間隔

従来のCSSとTailwindの比較 従来の方法ではCSSでjustify-contentを設定する必要がありますが、Tailwindはjustify-start、justify-centerなどのクラス名を直接使用できます。between、around、evenlyは3つの間隔分布モードです。

💡 ヒント： justify-betweenはナビゲーションバーでロゴを左に、メニューを右に押し出すのによく使われます。justify-centerはコンテンツの中央揃えに使用します。

交差軸配置（items）

items-*クラスはflexアイテムの交差軸に沿った配置を制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交差軸配置デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-start</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">低い</div>
        <div class="bg-blue-600 text-white px-4 py-6 rounded">中くらい</div>
        <div class="bg-blue-700 text-white px-4 py-8 rounded">高い</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded">低い</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded">中くらい</div>
        <div class="bg-green-700 text-white px-4 py-8 rounded">高い</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-end</h3>
      <div class="flex items-end gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">低い</div>
        <div class="bg-purple-600 text-white px-4 py-6 rounded">中くらい</div>
        <div class="bg-purple-700 text-white px-4 py-8 rounded">高い</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-stretch（デフォルト）</h3>
      <div class="flex items-stretch gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-orange-500 text-white px-4 rounded flex items-center justify-center">低い</div>
        <div class="bg-orange-600 text-white px-4 rounded flex items-center justify-center">中くらい</div>
        <div class="bg-orange-700 text-white px-4 rounded flex items-center justify-center">高い</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-baseline</h3>
      <div class="flex items-baseline gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded text-sm">小</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded text-2xl">大</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded text-base">ベースライン</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

交差軸配置クラスリファレンス：

クラス CSS 値 説明
items-start align-items: flex-start 開始位置に配置
items-center align-items: center 中央揃え
items-end align-items: flex-end 終了位置に配置
items-stretch align-items: stretch 引き伸ばして埋める（デフォルト）
items-baseline align-items: baseline ベースライン揃え

従来のCSSとTailwindの比較 従来の方法ではCSSでalign-itemsを設定する必要がありますが、Tailwindはitems-start、items-centerなどのクラス名を直接使用できます。items-baselineは異なるフォントサイズのテキストを揃えるのに特に便利です。

💡 ヒント： items-centerとjustify-centerを組み合わせると、完全な水平・垂直中央揃えが実現できます。

コンテンツ配置（content）

content-*クラスは複数行のflexアイテムの交差軸に沿った分布を制御します。flex-wrapが有効な場合にのみ効果があります。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>コンテンツ配置デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-center</h3>
      <div class="flex flex-wrap content-center gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-blue-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-between</h3>
      <div class="flex flex-wrap content-between gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-around</h3>
      <div class="flex flex-wrap content-around gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-purple-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-purple-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSでalign-contentを設定する必要がありますが、Tailwindはcontent-center、content-betweenなどのクラス名を直接使用できます。このプロパティは複数行のflexコンテナでのみ機能します。

⚠️ 注意： content-*クラスはflex-wrapが有効で、複数の行がある場合にのみ効果があります。1行のレイアウトでは、items-*を使用して交差軸の配置を制御してください。

個別配置（self）

self-*クラスは、個別のflexアイテムがコンテナのitems-*設定を上書きし、独自の交差軸配置を独立して制御できます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>個別配置デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">selfがitems設定を上書き</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-40">
        <div class="bg-blue-500 text-white px-4 py-2 rounded self-start">self-start</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded self-center">self-center</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded self-end">self-end</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded self-stretch">self-stretch</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践的な応用：ナビバーの配置</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-600 text-white px-4 py-2 rounded">ロゴ</div>
        <div class="flex-1 bg-green-500 text-white px-4 py-2 rounded self-start">メニュー（上揃え）</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded self-center">ボタン（中央揃え）</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

個別配置クラスリファレンス：

クラス CSS 値 説明
self-auto align-self: auto コンテナ設定を継承
self-start align-self: flex-start 自身を開始位置に配置
self-center align-self: center 自身を中央揃え
self-end align-self: flex-end 自身を終了位置に配置
self-stretch align-self: stretch 自身を引き伸ばして埋める
self-baseline align-self: baseline 自身をベースライン揃え

従来のCSSとTailwindの比較 従来の方法ではCSSで特定の要素にalign-selfを設定する必要がありますが、Tailwindはself-start、self-centerなどのクラス名をHTML内で直接使用できます。

Flex Grow と Shrink

flex-grow、flex-shrink、flex-1はflexアイテムが残りのスペースをどのように共有するかを制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex GrowとShrinkデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-grow</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded flex-grow">flex-grow</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">固定</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">固定</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-1（よく使われる）</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-auto</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">固定</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-none</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded flex-none">flex-none</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-shrink-0（縮小を防止）</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded flex-shrink-0 w-64">縮小しない</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded flex-1">縮小可能</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Flexサイズ設定クラスリファレンス：

クラス CSS 値 説明
flex-grow flex-grow: 1 拡大を許可
flex-grow-0 flex-grow: 0 拡大を防止
flex-shrink flex-shrink: 1 縮小を許可
flex-shrink-0 flex-shrink: 0 縮小を防止
flex-1 flex: 1 1 0% 均等なスペース配分（推奨）
flex-auto flex: 1 1 auto コンテンツに基づく均等配分
flex-none flex: none 拡大も縮小もしない
flex-initial flex: 0 1 auto 初期状態

従来のCSSとTailwindの比較 従来の方法ではCSSでflex-grow、flex-shrink、flex-basisの3つのプロパティを別々に設定する必要がありますが、Tailwindのflex-1は最も一般的な設定を1つのクラスにまとめています。

💡 ヒント： flex-1は最もよく使われるflexクラスで、アイテムに残りのスペースを均等に共有させます。flex-autoはコンテンツの幅を考慮するため、アイテムのコンテンツの長さが異なる場合に適しています。

Gap間隔（gap）

gap-*クラスはflexアイテム間の間隔を制御し、従来のmarginアプローチに代わるものです。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gap間隔デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4（16px）</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-6 py-4 rounded">1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded">2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded">3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded">4</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-4（水平と垂直を別々に制御）</h3>
      <div class="flex flex-wrap gap-x-8 gap-y-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-32 text-center">4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-32 text-center">5</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">異なるgapサイズ</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-2（8px）</p>
          <div class="flex gap-2 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-6（24px）</p>
          <div class="flex gap-6 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-10（40px）</p>
          <div class="flex gap-10 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では子要素にmarginを設定する必要がありますが、最初と最後の要素には特別な処理が必要です。Tailwindのgap-*はコンテナに直接間隔を設定し、端のケースを自動的に処理します。

💡 ヒント： gap-*はGridレイアウトでも機能します。gap-x-*とgap-y-*で水平と垂直の間隔を独立して制御できます。

総合例

上記のすべての概念を組み合わせて、完全なFlexboxレイアウトを作成してみましょう。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox総合例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- ナビバー -->
    <nav class="bg-white rounded-lg shadow p-4">
      <div class="flex justify-between items-center">
        <div class="text-xl font-bold text-blue-600">ロゴ</div>
        <div class="hidden md:flex items-center gap-6">
          <a href="#" class="text-gray-600 hover:text-blue-600">ホーム</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">製品</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">概要</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">お問い合わせ</a>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">サインイン</button>
      </div>
    </nav>

    <!-- ヒーローセクション -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow p-12">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="flex-1">
          <h1 class="text-3xl font-bold text-white mb-4">Flexboxへようこそ</h1>
          <p class="text-blue-100 mb-6">レスポンシブページを簡単に作成できる強力な柔軟レイアウトシステム</p>
          <div class="flex gap-4">
            <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">始めましょう</button>
            <button class="border border-white text-white px-6 py-3 rounded-lg">詳しく見る</button>
          </div>
        </div>
        <div class="flex-shrink-0">
          <div class="w-48 h-48 bg-white/20 rounded-full flex items-center justify-center">
            <span class="text-6xl">🎯</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 特徴カード -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📐</span>
        </div>
        <h3 class="font-semibold mb-2">柔軟な配置</h3>
        <p class="text-gray-600 text-sm flex-1">主軸、交差軸、個別配置モードをサポート</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📏</span>
        </div>
        <h3 class="font-semibold mb-2">柔軟なサイズ設定</h3>
        <p class="text-gray-600 text-sm flex-1">flex-growとflex-shrinkによるインテリジェントなスペース配分</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">🔄</span>
        </div>
        <h3 class="font-semibold mb-2">レスポンシブ折り返し</h3>
        <p class="text-gray-600 text-sm flex-1">flex-wrapで異なる画面サイズに自動適応</p>
      </div>
    </div>

    <!-- フッター -->
    <footer class="bg-gray-800 text-white rounded-lg shadow p-6">
      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
        <div class="text-gray-400">&copy; 2024 Flexboxサンプル</div>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">プライバシーポリシー</a>
          <a href="#" class="text-gray-400 hover:text-white">利用規約</a>
          <a href="#" class="text-gray-400 hover:text-white">お問い合わせ</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではナビバー、ヒーローセクション、カードグリッドなどのレイアウトのために大量のCSSを記述する必要がありますが、TailwindはHTML内のflexユーティリティクラスですべてを実現し、コード量を60%以上削減できます。

❓ よくある質問

Q flex-1とflex-autoの違いは何ですか？
A flex-1はflex: 1 1 0%と同等で、アイテムは0%からスペースを共有し、コンテンツの幅を無視します。flex-autoはflex: 1 1 autoと同等で、コンテンツの幅に基づいてスペースを共有します。ほとんどの場合、flex-1が推奨されます。
Q flex-wrap後の行間隔を制御するにはどうすればよいですか？
A content-*クラス（content-center、content-betweenなど）で複数行の分布を制御し、gap-*でアイテム間隔を設定します。gap-y-*で行間隔を個別に制御できます。
Q 水平・垂直中央揃えはどうすればよいですか？
A flex items-center justify-centerを使用してください。これはFlexboxで最も一般的な中央揃えテクニックで、従来のmargin: auto + positionアプローチよりはるかにシンプルです。
Q gapとmarginの違いは何ですか？
A gapはコンテナに設定され、端の間隔を自動的に処理し、marginの相殺が発生しません。marginは子要素に設定され、最初/最後の要素の間隔処理が必要です。gapが推奨されるアプローチです。

📖 まとめ

📝 課題

  1. ⭐ flex justify-between items-centerを使用して、ロゴが左、メニューが右の水平中央揃えナビバーを作成してみましょう

  2. ⭐⭐ flex flex-wrap gap-6を使用して自動折り返しのレスポンシブカードリストを作成し、カードはflex-1で均等にスペースを共有してみましょう

  3. ⭐⭐⭐ タイトル、説明、ボタン、画像を持つ完全なヒーローセクションを作成し、flexで横並びレイアウトにし、モバイルでは自動的に縦積みに切り替わるようにしてみましょう

100%