English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS Flexbox布局：弹性容器与对齐控制

1. Flex 容器与方向

Flexbox 是一维布局模型，通过 display: flex 创建弹性容器，使用方向类控制子元素排列方式。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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>
逻辑代码 45 行（超过 40 行限制，仅展示）

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 vs Tailwind 传统方式需要在 CSS 中设置 display: flex 和 flex-direction 属性，而 Tailwind 使用 flex、flex-row、flex-col 等类名直接在 HTML 中声明。

💡 提示： flex-row 是默认方向，可以省略。使用 flex 创建容器后，子元素默认水平排列。

2. Flex Wrap 换行

默认情况下，flex 项目会收缩以适应容器。使用 flex-wrap 允许项目换行显示。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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>
逻辑代码 43 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 flex-wrap: wrap 属性，而 Tailwind 使用 flex-wrap 类名直接声明。默认 flex-nowrap 不换行。

⚠️ 注意： 使用 flex-nowrap 时，项目可能会溢出容器。建议配合 overflow-x-auto 或使用 flex-wrap 允许换行。

3. 主轴对齐（justify）

justify-* 类控制 flex 项目在主轴方向上的对齐方式。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- justify-start -->
    <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>

    <!-- justify-center -->
    <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>

    <!-- justify-end -->
    <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>

    <!-- justify-between -->
    <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>

    <!-- justify-around -->
    <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>

    <!-- justify-evenly -->
    <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>
逻辑代码 61 行（超过 40 行限制，仅展示）

主轴对齐类名对照：

类名 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 vs Tailwind 传统方式需要在 CSS 中设置 justify-content 属性，而 Tailwind 使用 justify-start、justify-center 等类名直接声明。between、around、evenly 是间距分布的三种模式。

💡 提示： justify-between 常用于导航栏，让 logo 在左、菜单在右。justify-center 用于居中显示内容。

4. 交叉轴对齐（items）

items-* 类控制 flex 项目在交叉轴方向上的对齐方式。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- items-start -->
    <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>

    <!-- items-center -->
    <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>

    <!-- items-end -->
    <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>

    <!-- items-stretch -->
    <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>

    <!-- items-baseline -->
    <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>
逻辑代码 53 行（超过 40 行限制，仅展示）

交叉轴对齐类名对照：

类名 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 vs Tailwind 传统方式需要在 CSS 中设置 align-items 属性，而 Tailwind 使用 items-start、items-center 等类名直接声明。items-baseline 对于不同字号的文本对齐非常有用。

💡 提示： items-center 配合 justify-center 可以实现完美的水平垂直居中。

5. 内容对齐（content）

content-* 类控制多行 flex 项目在交叉轴方向上的分布方式，仅在 flex-wrap 换行时生效。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- content-center -->
    <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>

    <!-- content-between -->
    <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>

    <!-- content-around -->
    <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 vs Tailwind 传统方式需要在 CSS 中设置 align-content 属性，而 Tailwind 使用 content-center、content-between 等类名直接声明。该属性仅在多行 flex 容器中生效。

⚠️ 注意： content-* 类仅在 flex-wrap 启用且有多行项目时才有效果。单行情况下使用 items-* 控制交叉轴对齐。

6. 自身对齐（self）

self-* 类允许单个 flex 项目覆盖容器的 items-* 设置，独立控制自身的交叉轴对齐。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- self 覆盖示例 -->
    <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">Logo</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 vs Tailwind 传统方式需要在 CSS 中为特定元素设置 align-self 属性，而 Tailwind 使用 self-start、self-center 等类名直接在 HTML 中声明。

7. 弹性增长与收缩

flex-grow、flex-shrink 和 flex-1 控制 flex 项目如何分配剩余空间。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- flex-grow -->
    <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>

    <!-- flex-1 -->
    <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>

    <!-- flex-auto -->
    <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>

    <!-- flex-none -->
    <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>

    <!-- flex-shrink-0 -->
    <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>
逻辑代码 52 行（超过 40 行限制，仅展示）

弹性类名对照：

类名 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 vs Tailwind 传统方式需要在 CSS 中设置 flex-grow、flex-shrink、flex-basis 三个属性，而 Tailwind 的 flex-1 封装了常用配置，一行代码搞定。

💡 提示： flex-1 是最常用的弹性类，让项目等分剩余空间。flex-auto 会考虑内容宽度，适合内容长度不一的场景。

8. 间距控制（gap）

gap-* 类控制 flex 项目之间的间距，替代传统的 margin 方案。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- gap-4 -->
    <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>

    <!-- gap-x 与 gap-y -->
    <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">不同间距大小</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>
逻辑代码 61 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要为子元素设置 margin，但第一个或最后一个元素需要特殊处理。Tailwind 的 gap-* 直接在容器上设置间距，自动处理边缘情况。

💡 提示： gap-* 同样适用于 Grid 布局。使用 gap-x-* 和 gap-y-* 可以分别控制水平和垂直间距。

9. 综合示例

结合以上所有知识点，创建一个完整的 Flexbox 布局。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">Logo</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>

    <!-- Hero 区域 -->
    <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>
逻辑代码 75 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现导航栏、Hero 区域、卡片网格等布局，而 Tailwind 使用 flex 工具类直接在 HTML 中完成，代码量减少 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 在子元素上设置，需要处理第一个/最后一个元素的间距。推荐使用 gap。

📖 小节

📝 作业

  1. ⭐ 创建一个水平居中的导航栏，使用 flex justify-between items-center 实现 logo 在左、菜单在右的布局

  2. ⭐⭐ 创建一个响应式卡片列表，使用 flex flex-wrap gap-6 实现自动换行，卡片使用 flex-1 等分空间

  3. ⭐⭐⭐ 创建一个完整的 Hero 区域，包含标题、描述、按钮和图片，使用 flex 实现左右布局，并在移动端自动切换为垂直排列

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏