justify-content 控制 flex 容器主轴上直接子元素的剩余空间分配，不影响换行、交叉轴及子项尺寸；常见失效原因包括非 flex 容器、无剩余空间或主轴方向误解。
justify-content 在 flex 容器中到底控制什么
justify-content 只作用于 flex 主轴（main axis）上的直接子元素，不影响换行后的第二行、也不影响交叉轴（cross axis）的对齐。它不改变子项自身尺寸，只决定它们在主轴方向上「剩余空间」如何分配。
常见误用是以为它能“撑满容器”或“让最后一行右对齐”——其实它对多行 flex-wrap: wrap 容器无效（此时得用 justify-content: space-between 配合单行，或改用 gap + auto 外边距）。
space-between 和 space-around 的实际表现差异
两者都用于分散子项，但空隙逻辑完全不同：
-
space-between：首项紧贴容器起点，末项紧贴终点，中间间隙均分 —— 两两之间空隙相等，但首/末项与容器边缘无空隙 -
space-around：每个子项“周围”有相等空隙，即项与项之间是两份空隙（A右+ B左），而首项左侧、末项右侧各只有一份 —— 视觉上两端空隙只有中间空隙的一半 -
space-evenly：真正均分所有空隙（包括首左、末右），但 IE 不支持，需确认兼容性
.container {
display: flex;
justify-content: space-around; /* A留1份，A-B间2份，B-C间2份，C留1份 */
}justify-content 不生效的几个典型原因
不是代码写错了，而是布局前提没满足：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex或display: inline-flex——justify-content对非 flex 容器完全无效 - 子项设置了
flex: 0 0 100%或固定宽度且总和等于容器宽 —— 没有“剩余空间”，自然无处可分 - 主轴方向被
flex-direction: column改成了垂直方向，但你还盯着水平效果看 —— 此时justify-content控制的是上下间距 - 用了
flex-wrap: wrap且内容超行，justify-content仍只作用于当前行，不会跨行对齐
替代方案：当 justify-content 不够用时该怎么做
比如要让最后一行右对齐、或某一项自动挤到最右边，justify-content 无能为力，得换思路：
- 给最后一个子项加
margin-left: auto—— flex 会把它推到主轴末端，比justify-content更精准可控 - 用
gap替代justify-content: space-between配合margin微调，尤其适合响应式场景 - 需要复杂对齐（如第一行左对齐、第二行右对齐），应拆成多个 flex 容器，而非强求单个容器完成
-
绝对定位仍是兜底手段：
position: relative父容器 +position: absolute; right: 0子项，但会脱离文档流
真正容易被忽略的是：flex 布局的空间分配永远基于「容器剩余空间」，而不是「视觉预期」。先检查有没有剩余空间，再选对属性，比反复调 justify-content 值更省时间。
