Align Content 内容对齐
用于控制多行弹性和网格容器中行位置的实用工具。
| Class | Properties |
|---|
基本用法
Start 开始
使用 content-start 将行打包到容器中，与交叉轴的起始位置对齐：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Center 居中
使用 content-center 将行打包到容器中，与交叉轴的中心对齐：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-center ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>End 末尾
使用 content-end 将行打包到容器中，与交叉轴的末尾对齐：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-end ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Space between 空间之间
使用 content-between 在容器中分配行，使每行之间的空间相等：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-between ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Space around 围绕空间
使用 content-around 在容器中分配行，使每行周围的空间相等：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-around ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Space evenly 均匀空间
使用 content-evenly 在容器中分配行，使每个项目周围有相等的空间，但也考虑到使用 content-around 时通常会看到每个项目之间空间加倍的情况：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-evenly ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Stretch 伸展
使用 content-stretch 来允许内容项填充容器交叉轴上的可用空间：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-stretch ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>Normal 正常
使用 content-normal 将内容项打包到它们的默认位置，就好像没有设置 align-content 值一样：
01
02
03
04
05
html
<div class="h-56 grid grid-cols-3 gap-4 content-normal ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:content-around 只在悬停时应用 content-around 实用程序。
html
<div class="grid content-start hover:content-around">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:content-around 仅在中等屏幕尺寸及以上应用 content-around 实用程序。
html
<div class="grid content-start md:content-around">
<!-- ... -->
</div>