align-content 在 flex 多行布局中不起作用，是因为它仅在 flex-wrap: wrap 且容器交叉轴有剩余空间（如设 height/min-height）时生效；若未换行、无高度或被 align-items 干扰，则无效。
align-content 在 flex 多行布局中不起作用？先确认是否满足前提条件
align-content 只对 多行 flex 容器 生效，且容器必须设置 flex-wrap: wrap（或 wrap-reverse）。如果子项没换行、或者容器是单行（flex-wrap: nowrap），align-content 完全被忽略，此时修改它没有任何视觉变化。
- 检查父容器是否设置了
display: flex且flex-wrap: wrap - 确认子项总宽度（含 gap）确实超出容器宽度，触发了换行
- 用浏览器开发者工具查看 computed 样式，确认
flex-wrap值不是nowrap
align-content 的取值与实际对齐效果不一致？注意交叉轴方向和容器尺寸
在 flex-direction: row（默认）下，交叉轴是垂直方向，align-content 控制的是各行在容器 高度内 的分布。如果容器没有明确高度（比如 height: auto 或未设高），各行会“挤在一起”，此时 align-content: space-between 等值也看不出间距——因为容器自身高度刚好包裹内容，没有剩余空间可分配。
- 给 flex 容器设置固定高度（如
height: 300px）或最小高度（min-height）才能观察到align-content的效果 -
align-content: stretch是默认值，但仅当容器在交叉轴有可用空间时才拉伸各行；若容器高度由内容撑开，则无拉伸效果 -
align-content: center要求容器高度 > 所有行总高度，否则表现为顶部对齐
用了 align-content 还是不对齐？可能被 align-items 干扰了
align-content 管的是“行与行之间”的分布，而 align-items 管的是“每行内各子项在交叉轴上的对齐”。两者作用层级不同，但容易混淆。例如：容器设了 align-content: center，但子项本身高度不一致，又设了 align-items: flex-start，就会导致各行内部顶部对齐，整体看起来“居中偏上”。
- 调试时先临时注释掉
align-items，单独验证align-content行为 - 若需统一控制，建议子项高度一致，或用
align-items: stretch配合align-content - 注意
align-items的默认值是stretch，但若子项有height或min-height，会阻止拉伸
兼容性与替代方案：Safari 旧版本或需要 fallback
现代浏览器均支持 align-content，但 iOS Safari ≤ 9.3 和部分 Android WebView 存在 bug，例如 align-content: space-around 表现异常，或在 flex-direction: column 下失效。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
height: 400px; /* 必须设高 */
/* Safari 9.3 fallback：用伪元素模拟间距 */
position: relative;
}
.container::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background: transparent;
}- 优先测试目标环境（特别是 iOS 版本）
- 对关键场景，可用
padding+justify-content组合模拟space-between效果 - 避免在
flex-direction: column+flex-wrap: wrap的罕见组合中重度依赖align-content，兼容性更差
真正起作用的从来不是加了 align-content 这个声明，而是它生效所需的三个隐含条件：换行、交叉轴有剩余空间、没被其他对齐属性覆盖。漏掉其中任何一个，都会让样式“看起来没反应”。
