Flexbox & Grid
用于控制多行 Flex 和 Grid 容器中行位置的实用工具。
类名 | 样式 |
---|---|
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>
前缀an align-content
实用工具 与断点变体(如 md:
)一起使用,以便仅在中等 屏幕尺寸及以上尺寸时应用该实用工具
<div class="grid content-start md:content-around ..."> <!-- ... --></div>
了解更多关于在 变体文档 中使用变体的信息。