横向对齐内容

​基本用法

¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:content-around to only apply the content-around utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:content-around to apply the content-around utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.