Flexbox & Grid
用于控制 flex 和 grid 项目如何沿容器主轴对齐的实用工具。
类名 | 样式 |
---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-end-safe | justify-content: safe flex-end; |
justify-center | justify-content: center; |
justify-center-safe | justify-content: safe center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
justify-baseline | justify-content: baseline; |
justify-normal | justify-content: normal; |
使用 justify-start
实用工具将项目沿容器主轴的起始位置对齐
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 justify-center
或 justify-center-safe
实用工具将项目沿容器主轴的中心位置对齐
调整容器大小以查看对齐行为
justify-center
justify-center-safe
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>
<div class="flex justify-center-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>
当没有足够的可用空间时,justify-center-safe
实用工具会将项目对齐到容器的起始位置,而不是中心位置。
使用 justify-end
或 justify-end-safe
实用工具将项目沿容器主轴的末尾位置对齐
调整容器大小以查看对齐行为
justify-end
justify-end-safe
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>
<div class="flex justify-end-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>
当没有足够的可用空间时,justify-end-safe
实用工具会将项目对齐到容器的起始位置,而不是末尾位置。
使用 justify-between
实用工具将项目沿容器主轴对齐,使每个项目之间有相等的空间
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 justify-around
实用工具将项目沿容器主轴对齐,使每个项目的每一侧都有相等的空间
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 justify-evenly
实用工具将项目沿容器主轴对齐,使每个项目周围都有相等的空间,同时也考虑了通常在使用 justify-around
时在每个项目之间看到的空间加倍的情况
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 justify-stretch
实用工具允许内容项目填充容器主轴上的可用空间
<div class="flex justify-stretch ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 justify-normal
实用工具将内容项目打包在其默认位置,就像没有设置 justify-content
值一样
<div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>
前缀a justify-content
实用工具 与断点变体(如 md:
)一起使用,以仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<div class="flex justify-start md:justify-between ..."> <!-- ... --></div>
了解有关在变体文档中使用变体的更多信息。