弹性盒子与网格
用于控制弹性和网格项目在容器主轴上如何定位的工具类。
| Class | Styles |
|---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: 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 将项目在容器主轴的中心对齐：
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div></div>使用 justify-end 将项目对齐到容器主轴的结束位置：
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div></div>使用 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>Prefix a justify-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex justify-start md:justify-between ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.