justify-content对多行无效，align-content才是控制换行后各行间空间分配的属性；它仅在flex-wrap: wrap且容器交叉轴有明确高度和剩余空间时生效，常见值如space-between使首末行贴边、中间行等距分布。
justify-content 对多行无效，align-content 才是控制“换行后各行之间如何分配多余空间”的正确属性。
为什么 justify-content: space-between 在换行后看起来没用
因为 justify-content 只作用于「单行内」的子元素对齐，它不管有多少行——每行都独立按该规则排，首行左对齐、第二行还是左对齐，不会让最后一行右移或整体居中。你看到的“不均匀”，其实是它根本没在管“行与行”的关系。
- 典型表现：三行内容，上下大片留白，中间一行孤零零悬在中间
- 根本前提缺失：没设
flex-wrap: wrap，容器仍是nowrap，压根没进入多行逻辑 - 即使写了
align-content，若容器没有明确高度（如height或min-height），它也无空间可分，直接退化为stretch
align-content 的取值和实际效果差异
它只在 flex-wrap: wrap 且容器交叉轴（默认垂直方向）有剩余空间时生效。常见取值对应的行为：
-
space-between：首行贴顶、末行贴底，中间行等距分布 → 行间空隙 = 剩余空间 / (行数 − 1) -
space-around：每行上下各占一份空隙 → 视觉上首尾空隙是行间空隙的一半 -
space-evenly：所有间隙（含顶部、行间、底部）完全相等 → 最“均匀”的视觉效果 -
center：所有行整体居中，上下留白相等（不是每行居中）
注意：align-content 在只有一行时完全不生效 —— 这是调试时最容易误判的点。
立即学习“前端免费学习笔记（深入）”；
必须同时满足的三个条件才能让 align-content 生效
缺一不可，漏掉任意一个都会导致“写了等于没写”：
- 父容器设了
display: flex且flex-wrap: wrap（不是nowrap） - 容器在交叉轴上有明确尺寸约束，比如
height: 400px、min-height: 300px或max-height+overflow - 子元素总高度（含 margin/padding/border）小于容器交叉轴可用高度，否则没“多余空间”可分
特别注意：子项若设了 align-self: stretch（默认）且没设 height，它们会拉伸填满整行高度，但 align-content 管的仍是“行块”之间的位置，不是单个子项。
比 align-content 更可控的替代方案：gap
如果你只需要“行与行之间有固定间距”，而不是“把剩余空间均分”，gap 是更干净的选择：
-
gap: 16px同时控制行内和行间间隙（现代浏览器支持良好，IE 不支持） - 它不依赖容器高度，也不受行数影响，写一次就稳定生效
- 与
align-content不冲突，可共存：前者管“固定间隔”，后者管“剩余空间分配” - 如果需要响应式间隙，直接配合媒体查询：
@media (max-width: 768px) { gap: 8px; }
真正容易被忽略的是：当容器高度不固定、内容动态增减时，align-content 的行为会变得不可预测；而 gap 始终提供确定性间距 —— 多数真实项目里，后者才是更务实的选择。
