justify-content 控制 Flex 子元素在主轴上的对齐方式，必须作用于 display: flex 容器，其效果由 flex-direction 决定主轴方向：row 时 flex-start 为左对齐，column 时为顶部对齐；常用值包括 flex-start（默认，起始端对齐）、center（居中）、flex-end（结束端对齐）、space-between（两端贴边、中间等距）、space-around（各元素两侧等距）、space-evenly（所有间距相等）。
用 justify-content 控制 Flex 布局的主轴对齐，关键不在“怎么写”，而在“先确认主轴方向”。它只对设置了 display: flex 的容器生效，且效果完全取决于 flex-direction 的设定。
主轴方向决定 justify-content 的实际含义
主轴不是固定“水平向右”的——它由 flex-direction 决定：
-
flex-direction: row（默认）→ 主轴水平，justify-content: flex-start= 左对齐 -
flex-direction: row-reverse→ 主轴仍水平但反向，flex-start就变成右对齐 -
flex-direction: column→ 主轴垂直，flex-start= 顶部对齐 -
flex-direction: column-reverse→ 主轴垂直反向，flex-start= 底部对齐
常用 justify-content 取值与适用场景
所有取值都作用于整个容器的子项，在主轴方向上整体分布：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
flex-start：子项紧贴主轴起始端（最常用，默认值） -
center：所有子项在主轴方向上居中（比如水平居中一行按钮，或垂直居中一段文字） -
flex-end：子项紧贴主轴结束端（如右对齐导航栏、底部对齐内容） -
space-between：首尾子项贴住容器两端，中间等距（至少 2 个子项才明显） -
space-around：每个子项两侧留出相等间隙，视觉更宽松 -
space-evenly：子项之间、子项与容器边缘间距完全一致（注意 IE 不支持）
图片或文字居中时的常见误区
很多人想让一张图水平居中，却去给 <img> 加 margin: auto 或 text-align: center。其实只需：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器是
display: flex - 若主轴为
row（默认），加justify-content: center即可水平居中 - 若需垂直居中，还要配合
align-items: center（且父容器要有明确高度，如min-height: 100vh） - 图片本身不用设
display: block，也不用额外加 margin 或 text-align
调试建议
写完后如果没效果，优先检查三件事：
- 父元素是否真的设置了
display: flex -
flex-direction是什么？主轴方向和你预期是否一致？ - 容器有没有足够空间？比如
justify-content: center在高度极小的容器里，看不出垂直居中效果
