Tailwind CSS - 内容对齐

Tailwind CSS：内容对齐

Tailwind CSS 中的 align-content 实用工具用于控制多行 flexbox 或 grid 容器中行的间距。它对单行容器没有影响。

关键区别：`align-content` 与 `align-items`

这是初学者常混淆的地方。请记住这条规则：

align-items：沿交叉轴对齐单行内的项目。
align-content：沿交叉轴对齐容器内整组行。

只有当您的容器在交叉轴上有额外空间，并且您的项目已换行到多行（对于 flexbox）或者您定义了有额外空间的行（对于 grid）时，align-content 才会生效。

内容对齐类

以下是用于控制内容行对齐的实用工具类。

类	CSS 属性
`content-normal`	`align-content: normal;`
`content-center`	`align-content: center;`
`content-start`	`align-content: flex-start;`
`content-end`	`align-content: flex-end;`
`content-between`	`align-content: space-between;`
`content-around`	`align-content: space-around;`
`content-evenly`	`align-content: space-evenly;`
`content-baseline`	`align-content: baseline;`
`content-stretch`	`align-content: stretch;` (grid 默认值)

实际示例：一个多行 Flex 容器

此示例使用一个 flex-wrap 容器来演示不同的 align-content 实用工具如何垂直分布项目行。每个容器都有固定高度，以使效果可见。

<!DOCTYPE html>
<html lang="en">
<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="bg-slate-100 p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Align Content in a Flex Container</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- 示例：content-start -->
      <div>
        <h2 class="font-semibold mb-2">`content-start`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-start">
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- 示例：content-center -->
      <div>
        <h2 class="font-semibold mb-2">`content-center`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-center">
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- 示例：content-end -->
      <div>
        <h2 class="font-semibold mb-2">`content-end`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-end">
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- 示例：content-between -->
      <div>
        <h2 class="font-semibold mb-2">`content-between`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-between">
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

何时使用 Align Content

标签云：当创建多行换行的标签云时，content-center 可以将整个标签组在其容器内垂直居中。
弹性卡片网格：在卡片网格中，content-evenly 或 content-around 可以确保卡片行之间间隔良好，即使容器的高度发生变化。
表单布局：当布局在小屏幕上可能换行的表单字段时，content-start 确保它们紧密排列在顶部，保持可预测的布局。

调试提示

如果 align-content 似乎不起作用，请首先检查这两件事：

您的容器是否具有 flex-wrap（对于 flexbox）？
您的容器是否有额外的垂直空间（高度大于其内容的总高度）？