Flexbox 和 Grid
控制在多行弹性容器和网格容器中行的对齐方式的工具类。
// 翻译API表注释
| 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-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.