Flexbox 和 Grid
用于控制内容如何同时对齐和对齐的实用程序。
使用 place-content-center
将项目打包在块轴的中心
<div class="grid grid-cols-2 gap-4 place-content-center h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-start
将项目排列在块轴的起始位置
<div class="grid grid-cols-2 gap-4 place-content-start h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-end
将项目排列在块轴的结束位置
<div class="grid grid-cols-2 gap-4 place-content-end h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-between
将网格项目沿块轴分布,使块轴上每行之间有相等的间距。
<div class="grid grid-cols-2 gap-4 place-content-between h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-around
将网格项目分布,使块轴上每行周围有相等的间距
<div class="grid grid-cols-2 gap-4 place-content-around h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-evenly
将网格项目分布,使它们在块轴上均匀间隔
<div class="grid grid-cols-2 gap-4 place-content-evenly h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
使用 place-content-stretch
在块轴上沿网格区域拉伸网格项目
<div class="grid grid-cols-2 gap-4 place-content-stretch h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:place-content-center
仅在悬停时应用 place-content-center
实用程序。
<div class="grid place-content-start hover:place-content-center">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。
您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等。例如,使用 md:place-content-center
仅在中等屏幕尺寸及以上时应用 place-content-center
实用程序。
<div class="grid place-content-start md:place-content-center">
<!-- ... -->
</div>