Tailwind CSS - 项目对齐

Tailwind CSS - Justify Items（项目对齐）

Tailwind CSS 中的 Justify Items 实用工具类用于控制项目如何沿主（内联或水平）轴在其各个网格单元格内部对齐。这是使用 CSS Grid 创建精确布局的基本概念。

Justify Items 实用工具类

这些类将 justify-items CSS 属性应用于网格容器。

类名	CSS 属性
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

关键区别：justify-items 与 justify-content

这是学习者常混淆的一个点。理解它们的区别至关重要：

• justify-items：将内容对齐到每个网格单元格内部。可以把它想象成网格项目的 text-align。它作用于项目本身。
• justify-content：将整个网格单元格对齐到网格容器内部。它作用于网格容器，并且仅当网格单元格的总宽度小于容器宽度时才可见其效果。

实用示例：在网格中对齐项目

让我们演示每个实用工具类。为了使对齐更清晰，我们将为网格单元格添加背景色，以便您可以看到它们的边界。

示例：justify-items-start

项目在其单元格的左边缘对齐。

<h3 class="mt-8 text-lg font-semibold">justify-items-start</h3>
<div class="grid grid-cols-3 gap-4 justify-items-start bg-slate-100 p-4 rounded-lg">
  <div class="bg-blue-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-blue-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 3</div>
</div>

示例：justify-items-end

项目在其单元格的右边缘对齐。

<h3 class="mt-8 text-lg font-semibold">justify-items-end</h3>
<div class="grid grid-cols-3 gap-4 justify-items-end bg-slate-100 p-4 rounded-lg">
  <div class="bg-green-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-green-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-green-500 text-white p-4 rounded">Item 3</div>
</div>

示例：justify-items-center

项目在其单元格内水平居中。这非常适用于产品网格。

<h3 class="mt-8 text-lg font-semibold">justify-items-center</h3>
<div class="grid grid-cols-3 gap-4 justify-items-center bg-slate-100 p-4 rounded-lg">
  <div class="bg-purple-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-purple-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-purple-500 text-white p-4 rounded">Item 3</div>
</div>

示例：justify-items-stretch（默认）

项目拉伸以填充其单元格的完整宽度。这是默认行为。

<h3 class="mt-8 text-lg font-semibold">justify-items-stretch (Default)</h3>
<div class="grid grid-cols-3 gap-4 justify-items-stretch bg-slate-100 p-4 rounded-lg">
  <div class="bg-red-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-red-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-red-500 text-white p-4 rounded">Item 3</div>
</div>

响应式设计

你可以在不同断点控制项目对齐。例如，你可能希望项目在移动设备上拉伸，但在较大屏幕上居中。

<div class="grid grid-cols-3 gap-4 justify-items-stretch md:justify-items-center bg-slate-100 p-4 rounded-lg">
  <!-- 这些项目在小屏幕上会拉伸，在中等及以上屏幕上会居中 -->
  <div class="bg-indigo-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-indigo-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-indigo-500 text-white p-4 rounded">Item 3</div>
</div>

进一步学习

要完全掌握网格对齐，你还应该学习相应的垂直对齐实用工具类：Align Items (align-items)。justify-items 和 align-items 结合使用，可以让你完全控制网格单元格内项目的放置。