align-content 对单行 flex 容器无效，仅在多行（flex-wrap: wrap）且容器有高度剩余空间时生效；它控制的是“行”在交叉轴上的分布，而非子项。
align-content 对 flex 容器的垂直空间分配是否生效？
align-content 只在多行 flex 容器中起作用，单行情况下完全无效。如果你给一个只有一行子项的 display: flex 容器设置了 flex-wrap: nowrap（默认值），再怎么设 align-content: space-between 都不会让子盒子在垂直方向“均匀分布”——它根本没机会分配多余空间。
常见错误现象：align-content 设了但子项全挤在顶部或默认交叉轴起点，毫无反应。
- 必须先让容器变成多行：设置
flex-wrap: wrap或wrap-reverse - 容器需有明确高度（比如
height: 400px），且子项总高度小于该高度，才能产生“剩余空间”供align-content分配 - 子项需足够宽/高，触发换行（例如用
flex-basis或固定宽度迫使第二行出现）
真正想让多个盒子垂直均匀分布，该用什么？
多数人实际要的是“单列多行盒子在容器内沿垂直方向等距拉开”，这不是 align-content 的职责，而是 justify-content（主轴）或 align-items/align-self（交叉轴）的范畴 —— 但前提是主轴设为垂直方向。
正确做法是把 flex 主轴转成 column：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
justify-content: space-between; /* 垂直方向均匀分布 */
height: 400px;
}-
justify-content: space-between在 column 主轴下，就是让首尾子项贴上下边缘，中间等距 -
justify-content: space-around或space-evenly也适用，语义和间距逻辑不同 - 不需要
flex-wrap，也不依赖多行；单列布局下更可控
align-content 的典型有效场景是什么？
align-content 真正有用的地方，是当你的 flex 容器里有**多行、且容器高度远大于所有行总高度**时，用来控制这些“行”整体在交叉轴上的对齐方式。
例如：
.grid {
display: flex;
flex-wrap: wrap;
align-content: space-around; /* 多行之间垂直等距 */
height: 600px;
}
.grid > div {
flex: 0 0 120px; /* 固定宽度，强制换行 */
height: 80px;
}- 假设每行最多放 4 个
120px宽盒子，6 个盒子会排成 2 行 → 2 行总高约160px，剩下440px空间由align-content分配 -
space-between：第一行顶边、最后一行底边贴容器边缘，中间空隙均分 -
stretch（默认）：各行高度被拉伸填满容器（仅当子项未设高度时） - 注意：它控制的是“行”的位置，不是“子项”的位置
容易被忽略的关键细节
很多人试了 align-content 没效果，卡在几个隐性条件上：
- 忘了设
height或min-height—— 没有“剩余空间”，align-content就无事可做 - 子项用了
align-self: stretch（默认），又没设高度，导致行被撑高，反而没了空隙 - 在 grid 布局里误用 ——
align-content在 grid 中作用对象是“轨道行”，不是子项，行为逻辑完全不同 - 用 Safari 旧版本时，
align-content对flex-wrap: wrap-reverse支持不稳定，建议加flex-direction: column-reverse替代
真正要垂直均匀分布多个块级盒子，优先检查主轴方向和 justify-content；只有当你明确需要控制“多行 flex 行组”在容器中的垂直位置时，align-content 才是那个工具。
