flex容器换行后列表项上下不对齐，是因为未设置align-content；该属性仅在flex-wrap: wrap且多行时生效，用于控制行与行之间的对齐，需配合容器明确的交叉轴高度（如height或min-height）才能起作用。
flex 容器换行后列表项上下不对齐，是因为没设 align-content
当 flex-wrap: wrap 生效且子项跨多行时，align-content 才起作用——它控制的是“行与行之间的对齐”，不是单个子项的对齐（那是 align-items 的事）。很多同学调了 align-items: center 没用，就是混淆了这两个属性。
-
align-content只在多行 flex 容器中生效；单行下完全无效 - 默认值是
stretch，但若子项高度不一致，又没设高度或min-height，视觉上就会“错位” - 常用值：
flex-start（顶对齐）、center（居中）、space-between（行间等距）
为什么 align-content: center 有时看起来没效果？
常见原因是容器没有明确的交叉轴（cross axis）剩余空间。比如父容器高度未设定、或被内容撑开，导致没有“可分配的空间”让 align-content 发挥作用。
- 给 flex 容器加
height或min-height（例如min-height: 200px） - 确保子项没有设置
align-self: stretch以外的强制拉伸行为（尤其避免混用height: 100%） - 检查是否误用了
align-items替代align-content：前者管每行内子项对齐，后者管行组整体位置
一个能验证 align-content 的最小可运行例子
.container {
display: flex;
flex-wrap: wrap;
align-content: center; /* 关键：让所有行整体垂直居中 */
height: 300px; /* 必须有高度，否则无效果 */
border: 1px solid #ccc;
}
.item {
width: 80px;
height: 60px;
margin: 4px;
background: #e0f7fa;
}
上面代码中，如果删掉 height: 300px，align-content: center 就会失效——浏览器无法计算“中间在哪”。这也是最容易被忽略的一步。
比 align-content 更稳妥的替代方案
如果只是想让换行后的所有子项视觉上“整齐”，且不依赖容器高度，建议改用 align-items: flex-start + 统一子项高度/内边距：
立即学习“前端免费学习笔记（深入）”；
-
align-items: flex-start确保每行子项都从顶部对齐 - 给
.item加min-height和display: flex; align-items: center; justify-content: center;，让内容在项内居中 - 避免子项内部使用
vertical-align或line-height混合布局，容易破坏 flex 对齐逻辑
真正需要 align-content 的场景其实不多，多数所谓“错位”，其实是子项自身尺寸或内部对齐没控好。先检查 height、min-height 和 align-items，再动 align-content。
