Flexbox & Grid
用于控制多行 flex 和 grid 容器中行如何定位的实用程序。
使用 content-start
将容器中的行打包到横轴的起点
<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>
使用 content-center
将容器中的行打包到横轴的中心
<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>
使用 content-end
将容器中的行排列到交叉轴的末端
<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>
使用 content-between
将容器中的行分布,使每行之间有相等的间距
<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>
使用 content-around
将容器中的行分布,使每行周围有相等的间距
<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>
使用 content-evenly
将容器中的行分布,使每项周围有相等的间距,但同时考虑到使用 content-around
时每项之间通常会出现的间距加倍
<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>
使用 content-stretch
允许内容项填充容器交叉轴上的可用空间
<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>
使用 content-normal
将内容项排列在默认位置,就像没有设置 align-content
值一样
<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
实用程序。
<div class="grid content-start hover:content-around">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、聚焦和其它状态 文档。
您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:content-around
仅在中等屏幕尺寸及以上时应用 content-around
实用程序。
<div class="grid content-start md:content-around">
<!-- ... -->
</div>