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