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 将容器中的行紧贴交叉轴的起点排列：

01

02

03

04

05

<!-- [!code classes: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 将容器中的行在交叉轴上居中排列：

01

02

03

04

05

<!-- [!code classes: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 将容器中的行紧贴交叉轴的终点排列：

01

02

03

04

05

<!-- [!code classes: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 在容器中分布各行，使每行之间的间距相等：

01

02

03

04

05

<!-- [!code classes: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 在容器中分布各行，使每行周围的间距相等：

01

02

03

04

05

<!-- [!code classes: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 时项目之间通常会出现的双倍间距：

01

02

03

04

05

<!-- [!code classes:content-evenly] -->
<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 让内容项目沿容器交叉轴填满可用空间：

01

02

03

04

05

<!-- [!code classes: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 值一样：

01

02

03

04

05

<!-- [!code classes:content-normal] -->
<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>

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