align-content

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.