对齐内容 (align-content)

用于控制在多行弹性盒子和网格容器中行的位置的工具类。

Class Styles

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>

Prefix an align-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.