Flexbox & Grid
justify-content
控制 flex 和 grid 容器中的项目如何沿主轴定位的功能类。
| 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; |
示例
Start（起始）
使用 justify-start 将项目对齐到容器主轴的起始位置：
01
02
03
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>Center（居中）
使用 justify-center 将项目沿容器主轴居中对齐：
01
02
03
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div></div>End（末端）
使用 justify-end 将项目对齐到容器主轴的末端：
01
02
03
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div></div>Space between（两端对齐）
使用 justify-between 使项目沿容器主轴均匀分布，项目之间保持相等的间距：
01
02
03
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>Space around（环绕对齐）
使用 justify-around 使项目沿容器主轴均匀分布，每个项目两侧保持相等的间距：
01
02
03
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>Space evenly（均匀分布）
使用 justify-evenly 使项目沿容器主轴均匀分布，每个项目周围保持相等的间距，同时考虑到使用 justify-around 时项目之间通常会出现的双倍间距：
01
02
03
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>Stretch（拉伸）
使用 justify-stretch 允许内容项目沿容器主轴填充可用空间：
01
02
03
<div class="grid grid-flow-col ..."> <div>01</div> <div>02</div> <div>03</div></div>Normal（正常）
使用 justify-normal 使内容项目按默认位置排列，就像没有设置 justify-content 值一样：
01
02
03
<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.
