justify-content可用值有flex-start、flex-end、center、space-between、space-around、space-evenly；分别实现主轴起始对齐、结束对齐、整体居中、首尾贴边中间等距、各元素两侧等间隙（两端间隙为中间一半）、所有间隙完全相等。
justify-content有哪些可用值，各自对齐效果是什么
它控制的是 flex 容器主轴（main axis）上子元素的分布方式。默认主轴是水平方向（flex-direction: row），所以 justify-content 默认影响左右对齐。
常用值及行为：
-
flex-start：所有元素紧贴容器起始边（左对齐，若flex-direction: column则为顶对齐） -
flex-end：所有元素紧贴容器结束边（右对齐 / 底对齐） -
center：整体居中，子元素之间间距不变，只挪动整个“块” -
space-between：首尾元素贴边，中间元素等距分配剩余空间（注意：只有 ≥2 个子元素时才看出“等距”） -
space-around：每个子元素两侧有相等间隙，视觉上两端间隙是中间间隙的一半 -
space-evenly：所有元素（含首尾）之间的空白完全相等 —— 这是唯一真正“均匀”的选项
为什么设置了justify-content:center却没居中
最常见原因是父容器没设 display: flex，或者子元素被设了 float、position: absolute 等脱离文档流的属性，导致 flex 布局失效。
另一个高频坑：容器宽度不够或子元素本身撑满父宽（比如 width: 100% 的块级子元素），此时没有“可分配空间”，justify-content 就失去作用。
- 检查父元素是否真有
display: flex（不是inline-flex导致宽度异常） - 确认子元素没用
margin: auto或text-align: center干扰判断 - 用浏览器开发者工具看 computed 样式，确认
justify-content是否被更高优先级规则覆盖 - 如果子元素是图片或行内元素，记得加
vertical-align: top避免基线对齐带来的错位感
space-between和space-around在真实布局中怎么选
关键看设计稿里“两端留白”和“元素间留白”的比例关系。
space-between 适合导航栏、按钮组这类需要首尾贴边、强调结构边界的设计；space-around 更柔和，适合卡片列表、图标组等需要呼吸感但不强调边界的场景。
-
space-between在只有 1 个子元素时，该元素会靠左（row）或靠上（column），毫无居中效果 —— 别误以为它能替代center -
space-around的“两端间隙小一半”特性，在子元素带背景或边框时特别明显，容易显得左边空得少、右边空得多 -
space-evenly兼容性稍弱（IE 完全不支持，iOS Safari 10.3+ 才支持），若需兼容老系统，得用space-around+ 调整padding模拟
justify-content对flex-wrap换行后的多行影响大吗
基本没影响 —— justify-content 只管单行内的主轴对齐。一旦启用了 flex-wrap: wrap，每行都会独立应用该规则，但行与行之间怎么排，得靠 align-content 控制。
- 如果想让多行整体在容器内垂直居中（比如两行内容上下居中），必须配
align-content: center，justify-content对此无效 - 当行数动态变化（如响应式卡片网格），
space-between会导致每行内部间距一致，但行高可能不均，视觉节奏易乱 - 某些场景下，宁可用
gap（如gap: 1rem）代替justify-content+ 内边距组合，更可控也更符合现代布局直觉
justify-content 看似简单，但和 flex-direction、flex-wrap、align-items 一叠加，就很容易互相掩盖问题。最稳妥的做法是：先关掉所有其他 flex 属性，只留 display: flex 和目标 justify-content，确认基础对齐成立，再逐步加回其它规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
