align-content

align-content

用于控制多行 Flex 和 Grid 容器中行位置的实用工具。

类名样式

content-normal

align-content: normal;

content-center

align-content: center;

content-start

align-content: flex-start;

content-end

align-content: flex-end;

content-between

align-content: space-between;

content-around

align-content: space-around;

content-evenly

align-content: space-evenly;

content-baseline

align-content: baseline;

content-stretch

align-content: stretch;

示例

使用 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>

前缀an align-content 实用工具与断点变体（如 md:）一起使用，以便仅在中等屏幕尺寸及以上尺寸时应用该实用工具

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

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