align-content

用于控制多行 flex 和 grid 容器中行定位方式的工具类。

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.