Flexbox & Grid
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 将容器中的行打包到交叉轴的起点：
01
02
03
04
05
<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
<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
<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
<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
<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
<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
<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
<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.
