Skip to content
W3S101

Tailwind CSS - 内容对齐

Tailwind CSS - Justify Content（内容对齐）

Section titled “Tailwind CSS - Justify Content（内容对齐）”

这些实用工具类用于控制 flex 和 grid 项目沿其容器主轴的定位方式。这对于在 Flexbox 中创建水平布局和在 Grid 中进行水平对齐是基础。

justify-* 类

Section titled “justify-* 类”

可以把 justify-content 想象成沿货架分布物品。你可以将它们分组到开头、居中、末尾或分散开来。这些实用工具类必须应用于 flex (flex) 或 grid (grid) 容器。

类名CSS 属性描述
justify-startjustify-content: flex-start;将项目打包到主轴的起始位置。
justify-centerjustify-content: center;将项目打包到主轴的中心位置。
justify-endjustify-content: flex-end;将项目打包到主轴的末尾位置。
justify-betweenjustify-content: space-between;均匀分布项目；第一个项目在起始位置，最后一个项目在末尾位置。
justify-aroundjustify-content: space-around;均匀分布项目，每个项目周围有相等的空间。
justify-evenlyjustify-content: space-evenly;均匀分布项目，项目之间和两端有相等的空间。
justify-stretchjustify-content: stretch;拉伸网格项目以沿内联轴填充容器（默认）。
justify-normaljustify-content: normal;项目以其默认位置打包，就像没有设置任何值一样。

实时演示

Section titled “实时演示”

以下示例在一个视图中展示了所有主要的 justify-content 变体。这使你可以直接比较每个实用工具如何影响 flex 容器中项目的布局。

示例：比较 Justify 实用工具

Section titled “示例：比较 Justify 实用工具”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Justify Content Comparison</title>
  <!-- 仅用于演示，我们使用 Tailwind Play CDN。在实际项目中，请通过构建步骤设置 Tailwind CSS。 -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-4 sm:p-8">


  <div class="max-w-2xl mx-auto space-y-8">
    <h1 class="text-3xl font-bold text-center text-slate-800">Justify Content Variations</h1>


    <!-- 靠左对齐 (Justify Start) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-start</h2>
      <div class="flex justify-start bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


    <!-- 居中对齐 (Justify Center) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-center</h2>
      <div class="flex justify-center bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


    <!-- 靠右对齐 (Justify End) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-end</h2>
      <div class="flex justify-end bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


    <!-- 两端对齐 (Justify Between) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-between</h2>
      <div class="flex justify-between bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


    <!-- 环绕对齐 (Justify Around) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-around</h2>
      <div class="flex justify-around bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


    <!-- 均匀对齐 (Justify Evenly) -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-evenly</h2>
      <div class="flex justify-evenly bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>


  </div>


</body>
</html>

响应式设计

Section titled “响应式设计”

Tailwind 的一个强大功能是能够在不同断点有条件地应用实用工具。例如，你可能希望项目在小屏幕上居中，但在较大屏幕上靠起始位置对齐。

<div class="flex justify-center md:justify-between">
  <!-- 在移动设备上居中，在中等及以上屏幕上两端对齐 -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

与其他 Flexbox/Grid 实用工具结合使用

Section titled “与其他 Flexbox/Grid 实用工具结合使用”

justify-content 控制主轴。对于交叉轴对齐，你将使用 items-* 实用工具类（例如 items-center）。将这两者结合起来，可以让你完全二维控制容器中项目的放置。