justify-content 主轴对齐属性

最后更新：2026-09-13

justify-content justify-content 主轴对齐属性

justify-content 属性用于设置弹性项目在主轴上的对齐方式，决定项目之间以及项目与容器边缘之间的间距分配。它是弹性布局中最常用的对齐属性，可以实现左对齐、右对齐、居中对齐、两端对齐和均匀分布等多种效果。主轴方向由 flex-direction 决定。

分类
初始值	normal
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS3
状态	标准

📝 语法

justify-content: normal | start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch;

⚙️ 取值

值	类型	描述
`normal \| flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly`	关键字	主轴对齐方式

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
justify-content	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： space-between 会让首尾项目贴边，中间均匀分布；space-around 会让每个项目两侧间距相等（首尾项目与边缘的间距是项目间的一半）；space-evenly 则让所有间距完全相等。

重要： justify-content 作用在主轴上。如果 flex-direction 为 column，justify-content 将控制垂直方向的对齐，此时应配合容器高度使用才能看到效果。

❓ 常见问题

Qspace-between、space-around、space-evenly 有什么区别？

Aspace-between 首尾贴边、中间项目等距；space-around 每个项目左右间距相等，边缘间距是项目间距的一半；space-evenly 所有间距（含边缘）完全相等。需要首尾贴边选 space-between，分布最均匀选 space-evenly。

Qjustify-content 和 text-align: center 有什么区别？

Atext-align: center 对齐块容器内的行内内容（文字、行内元素），作用于文本层；justify-content: center 对齐弹性项目在主轴上的位置，作用于布局层，还支持 space-between 等分布方式。布局用 justify-content，排文字用 text-align。

Qjustify-content: center 不生效是什么原因？

A最常见原因是容器没有剩余空间：子项总宽度等于或超过容器宽度时，主轴方向没有多余空间可分配，居中自然无效。另外若 flex-direction 为 column，需要在容器上设置明确高度，否则垂直方向被内容撑满也不会有剩余空间。检查主轴方向与容器尺寸即可定位。