align-content

控制多行弹性盒子和网格容器中行的对齐方式的实用工具。

快速参考

为flex/grid布局父容器属性。

使用 content-start 将容器中的行堆叠在交叉轴的起始位置：

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

使用 content-center 将容器中的行堆叠在交叉轴的中心位置：

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

使用 content-end 将容器中的行堆叠在交叉轴的末尾位置：

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

使用 content-between 将容器中的行分布开，使得每行之间都有相等的空间：

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

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

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

使用 content-evenly 将容器中的行分布开，使得每个项目周围都有相等的空间，同时也考虑了在使用 content-around 时通常会在每个项目之间看到的双倍空间：

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

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

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

使用 content-normal 将内容项目按照其默认位置排列，如同没有设置 align-content 值一样：

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

使用断点变体（例如 md:）作为 align-content 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

在变体文档中了解更多关于使用变体的信息。

justify-self

控制单个网格项目在其行内轴上的对齐方式的实用工具。

align-items

控制弹性盒子和网格项目在其容器交叉轴上的对齐方式的实用工具。