align-content 控制多行 Flex 项目在交叉轴上的行间分布，仅在 flex-wrap: wrap 且实际换行≥2行、容器有明确高度并存在剩余空间时生效；否则无效。
align-content 在多行 Flex 容器中起什么作用
align-content 控制的是**多行 flex 项目在交叉轴上的行间分布**，不是单个项目对齐，也不是容器内容整体居中。它只在 flex-wrap: wrap（或 wrap-reverse）且实际换行 ≥ 2 行时才生效。如果只有一行，align-content 完全没效果——这时候该用 align-items。
为什么设置了 align-content: center 却没居中
常见失效原因有这几个：
- 容器高度未设定，或设为
auto（浏览器无法计算剩余空间，align-content失去参照） - 子项总高度刚好填满容器（无剩余空间可分配）
- 忘了加
flex-wrap: wrap，导致强制单行，align-content被忽略 - 父容器使用了
min-height但未触发块级格式化上下文（如未清除浮动、未设overflow），影响高度计算
实现多行垂直居中的最小可靠写法
关键在于：固定容器高度 + 显式换行 + 剩余空间可用。示例：
.container {
display: flex;
flex-wrap: wrap;
height: 400px; /* 必须有明确高度 */
align-content: center; /* 行组在交叉轴居中 */
align-items: flex-start; /* 单行内项目顶部对齐（可按需改） */
}
.item {
flex: 0 0 120px; / 防止拉伸，控制换行 /
}
注意：align-content: center 居中的是“行盒子”整体，不是每个 .item。若想每行内部也居中，需配合 justify-content: center（主轴）和 align-items: center（单行交叉轴）。
立即学习“前端免费学习笔记（深入）”；
align-content 的其他常用值及适用场景
align-content 的取值直接影响多行布局的呼吸感：
-
flex-start：所有行贴顶部（默认行为） -
flex-end：所有行贴底部 -
center：行组整体居中（需容器有富余高度） -
space-between：首尾行贴边，中间行等距分布 -
space-around：每行周围分配相等间距（行间间距是行与边缘间距的 2 倍） -
space-evenly：所有间距（包括首行前、末行后、行之间）完全相等
真正容易被忽略的是：这些值的效果高度依赖容器高度是否「足够大」。哪怕只差 1px，space-between 就可能退化成 flex-start——因为没有空间可分配。调试时建议先用 outline: 1px solid red 包裹容器，确认高度真实存在。
