Flexbox & Grid
justify-content
用于控制 flex 和 grid 项目沿容器主轴的定位方式的实用工具。
| 类 | 样式 |
|---|---|
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 将项目对齐到容器主轴的起点
01
02
03
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>居中
使用 justify-center 将项目沿容器主轴的中心对齐
01
02
03
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div></div>结束
使用 justify-end 将项目对齐到容器主轴的终点
01
02
03
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div></div>两端对齐
使用 justify-between 将项目沿容器主轴对齐，使每个项目之间有相等的空间
01
02
03
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>周围对齐
使用 justify-around 将项目沿容器主轴对齐，使每个项目的两侧有相等的空间
01
02
03
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>均匀对齐
使用 justify-evenly 将项目沿容器主轴对齐，使每个项目周围有相等的空间，同时也考虑了使用 justify-around 时通常会在每个项目之间看到的空间加倍
01
02
03
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>拉伸
使用 justify-stretch 允许内容项目填充沿容器主轴的可用空间
01
02
03
<div class="grid grid-flow-col ..."> <div>01</div> <div>02</div> <div>03</div></div>正常
使用 justify-normal 将内容项目打包到其默认位置，就像没有设置 justify-content 值一样
01
02
03
<div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>响应式设计
前缀一个 justify-content 实用工具 与像 md: 这样的断点变体一起使用，以便仅在中等 屏幕尺寸及以上应用该实用工具
<div class="flex justify-start md:justify-between ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。
