justify-content仅作用于主轴剩余空间，需确保子项未占满容器且数量≥2；单子项居中用center；多子项两端对齐可用space-around或space-evenly；更灵活时用flex-grow分配剩余空间。
主轴对齐不灵活，往往不是 justify-content 不好用，而是没理解它只作用于“主轴方向的**剩余空间**”——也就是说，它不管子项自身尺寸，只管它们排完后，主轴上还剩多少空，再把这空怎么分。
justify-content 真正生效的前提
它只在容器有**剩余空间**时才起作用。如果所有子项加起来刚好占满主轴（比如 flex-direction: row 时总宽度 = 容器宽度），那无论设成 flex-start 还是 space-between，看起来都一样。
- 检查子项是否设置了固定宽高、min-width/min-height 或 flex-shrink 导致被压缩
- 确认容器没有被内容撑开（比如用了 width: fit-content）
- 用浏览器开发者工具看 computed 样式，确认主轴方向确实存在“可用剩余空间”
常见错觉：space-between 没反应？
很多人设了 justify-content: space-between 却发现首尾项紧贴边缘，中间没空——其实是因为只有 2 个及以上子项 时它才真正分配间隙。只有 1 个子项时，它等效于 flex-start。
- 想让单个子项居中？改用
justify-content: center - 想让多个子项两端对齐且首尾留白？用
justify-content: space-around或space-evenly - 注意：
space-between的第一项靠左、最后一项靠右，中间间隙相等；space-around是每项“周围”空隙相等，所以首尾空隙只有中间的一半
更灵活的替代方案：用 flex-grow 分配空间
当 justify-content 不够用（比如要让某几个子项占更多空间），就该交给 flex-grow ——它直接按比例瓜分**剩余空间**，比纯对齐更可控。
立即学习“前端免费学习笔记（深入）”；
- 给需要伸展的子项设
flex-grow: 1，其他设flex-grow: 0（默认值） - 想让 A 占 2 份、B 占 1 份？A 设
flex-grow: 2，B 设flex-grow: 1 - 配合
flex-basis可设定“基础尺寸”，避免从零开始拉伸（例如flex: 1 1 200px）
别忘了主轴方向的影响
justify-content 始终作用于主轴，而主轴由 flex-direction 决定：
-
flex-direction: row→ 主轴水平 →justify-content控制左右对齐 -
flex-direction: column→ 主轴垂直 →justify-content控制上下对齐 - 如果想控制垂直方向对齐（比如 column 下的左右对齐），要用
align-items，不是justify-content
