Flexbox & Grid
用于控制单个网格项目在其内联轴上如何对齐的实用程序。
使用 justify-self-auto
根据网格的 justify-items
属性的值对齐项目
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-auto ...">02</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
使用 justify-self-start
将网格项目对齐到其内联轴的开头
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-start ...">02</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
使用 justify-self-center
将网格项目沿其内联轴的中心对齐
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-center ...">02</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
使用 justify-self-end
将网格项目对齐到其内联轴的末尾
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-end ...">02</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
使用 justify-self-stretch
将网格项目拉伸以填充其内联轴上的网格区域
<div class="grid justify-items-start ...">
<!-- ... -->
<div class="justify-self-stretch ...">02</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:justify-self-end
仅在悬停时应用 justify-self-end
实用程序。
<div class="justify-self-start hover:justify-self-end">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、聚焦和其它状态 文档。
您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、 prefers-reduced-motion 等等。例如,使用 md:justify-self-end
仅在中型屏幕尺寸及以上应用 justify-self-end
实用程序。
<div class="justify-self-start md:justify-self-end">
<!-- ... -->
</div>