justify-content 在 flex-wrap: wrap 下仍有效，但只控制每行内主轴对齐；行间垂直分布需用 align-content，且容器须有交叉轴剩余空间。
flex-wrap: wrap 后 justify-content 突然不生效了？
不是 justify-content 失效，而是它根本没管“行与行之间”的事。只要用了 flex-wrap: wrap，子元素一旦换行，就进入了多行模式——此时 justify-content 仍只控制**每行内部**在主轴上的对齐（比如左右间距），而行与行之间的垂直分布，得靠 align-content。
常见现象：容器设了 justify-content: space-between，第一行两端对齐，第二行却紧贴第一行下方，看起来像“挤在一起”。这是因为 align-content 默认是 stretch（拉满交叉轴），但容器在交叉轴方向（比如高度）没留空余空间，导致所有行被压扁贴底。
- 必须给父容器设置明确的交叉轴尺寸（如
height或min-height），align-content才有可分配的空间 -
align-content: center让所有行整体在交叉轴上居中，不是让每行里的子项居中 -
align-content: space-between要求至少两行才可见效果；单行时完全无效
align-content 和 align-items 混用时为什么更乱？
align-items 和 align-content 控制的是两个不同层级的对齐：align-items 是“每行内子项在交叉轴上的对齐”，align-content 是“所有行作为一个整体在交叉轴上的对齐”。两者同时存在时，容易互相干扰。
典型错误：容器设了 flex-direction: row + flex-wrap: wrap，又同时设 align-items: stretch（默认）和 align-content: center。结果子元素被拉高填满整行高度，再把这几行整体居中——视觉上反而显得上下留白巨大、内容悬浮。
- 如果子元素高度天然不一致（如图文卡片含不同长度文字），优先用
align-items: flex-start避免拉伸变形 - 想让多行整体居中，且子项本身高度可控，再启用
align-content: center -
align-content对单行容器无影响，调试时先确认是否真有多行（缩小容器宽度肉眼验证）
gap 配合 flex-wrap 使用时，align-content 还需要吗？
gap 解决的是“行列间隙”，不解决“行块定位”。即使用了 gap: 16px，若容器高度固定且子行总高小于该高度，align-content 依然决定这些行块是顶对齐、居中还是底对齐。
例如：容器 height: 400px，三行子项加 gap 总高仅 280px，剩下 120px 空白在哪？align-content 就是管这个的。
-
gap替代margin可避免首尾错位，但它不产生“布局块级位移” - 响应式场景下，
align-content的值（如space-around）会随行数动态重分配空白，比手动 JS 补空节点更可靠 - 注意兼容性：
align-content在老版 Safari（≤14.1）中对flex-direction: column支持不稳，建议加min-height回退
最后一行总是左对齐，怎么让它也参与 space-between？
这是 justify-content: space-between 的固有限制：它只在“当前行内”分配剩余空间，最后一行不满额时，右侧自然留白。没有原生 CSS 属性专治末行，但有实效解法：
- 用伪元素占位：
.container::after { content: ""; flex-basis: 100%; }，强制最后一行也被视为“需分配空间的一行” - 改用
display: grid+grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，天然支持末行自动填充 - 如果必须 Flex，且需兼容 IE，只能 JS 统计每行数量，动态插入空
<div class="placeholder"></div>
真正容易被忽略的点：所有这些对齐行为都依赖容器在交叉轴上有“未被子项撑满”的空间。没设 height 或 min-height，align-content 就像往满杯水里加冰块——加不进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
