横向对齐内容

​基本用法(Basic usage)

​开始(Start)

使用 content-start 将行在容器中沿交叉轴的起点进行排列：

🌐 Use content-start to pack rows in a container against the start of the cross axis:

<div class="h-56 grid grid-cols-3 gap-4 content-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​中心(Center)

使用 content-center 将行打包到容器的交叉轴中心：

🌐 Use content-center to pack rows in a container in the center of the cross axis:

<div class="h-56 grid grid-cols-3 gap-4 content-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​结尾(End)

使用 content-end 将行打包到容器中，以靠近交叉轴的末端：

🌐 Use content-end to pack rows in a container against the end of the cross axis:

<div class="h-56 grid grid-cols-3 gap-4 content-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​之间的空间(Space between)

使用 content-between 在容器中分配行，使每行之间有相等的间距：

🌐 Use content-between to distribute rows in a container such that there is an equal amount of space between each line:

<div class="h-56 grid grid-cols-3 gap-4 content-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​周围空间(Space around)

使用 content-around 在容器中分布行，使每行周围有相等的空间：

🌐 Use content-around to distribute rows in a container such that there is an equal amount of space around each line:

<div class="h-56 grid grid-cols-3 gap-4 content-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​空间均匀(Space evenly)

使用 content-evenly 在容器中分配行，使每个项目周围有相等的间距，同时还考虑到使用 content-around 时每个项目之间通常会出现的间距加倍情况：

🌐 Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:

<div class="h-56 grid grid-cols-3 gap-4 content-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​拉紧(Stretch)

使用 content-stretch 允许内容项沿容器的交叉轴填充可用空间：

🌐 Use content-stretch to allow content items to fill the available space along the container’s cross axis:

<div class="h-56 grid grid-cols-3 gap-4 content-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​普通(Normal)

使用 content-normal 将内容项按默认位置打包，就好像没有设置 align-content 值一样：

🌐 Use content-normal to pack content items in their default position as if no align-content value was set:

<div class="h-56 grid grid-cols-3 gap-4 content-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

---

​有条件申请

​悬停、聚焦及其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用hover:content-around 仅在 hover 时应用 content-around 工具。

<div class="grid content-start hover:content-around">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:content-around 仅在中等屏幕尺寸及以上时应用 content-around 工具。

<div class="grid content-start md:content-around">
  <!-- ... -->
</div>

要了解更多信息，请查看有关 响应式设计、暗黑模式、以及 其他媒体查询修饰符 的文档。