align-content仅对多行flex容器有效，需同时满足display: flex、flex-wrap: wrap且子项溢出换行，它控制行间在交叉轴的对齐与间距，不影响单行内子项间距。
align-content对多行flex容器才有效
很多人试了align-content没反应，是因为它只在**多行flex容器**（即flex-wrap: wrap或wrap-reverse）且存在**多行内容**时才起作用。单行容器里用它完全无效，浏览器会默默忽略。
- 必须同时满足：父容器
display: flex+flex-wrap: wrap - 子项总宽度（或高度，取决于主轴）要超出容器，才能自动折成多行
-
align-content控制的是“行与行之间”的间距和对齐，不是子项之间的间距
用space-between或space-around实现等距垂直分隔
当flex主轴是水平（flex-direction: row），换行后行方向变成垂直，此时align-content的值就决定了行在交叉轴（即垂直方向）上的分布方式。
-
align-content: space-between→ 第一行顶对齐，最后一行底对齐，中间行等距分配剩余空间 -
align-content: space-around→ 每行上下留等量空白，视觉上更宽松 -
align-content: space-evenly→ 行与容器边缘、行与行之间的间距完全相等（IE不支持）
例如：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
}
align-content不能替代gap，也影响不了单行内间距
align-content管的是“行级”布局，而子项内部的垂直/水平间距得靠别的方案。常见误区是想用它来加行内元素间隙，结果失败。
- 子项之间的横向/纵向间距，优先用
gap（推荐，现代浏览器支持良好） - 老项目需兼容IE？用
margin模拟gap，但要注意首尾项额外处理 -
align-content设再大，也不会让同一行里的两个div之间变宽 - 如果容器高度固定但子项总高度远小于它，
align-content才有发挥余地；否则可能根本看不出效果
IE11下align-content行为异常且不支持space-evenly
IE11虽然支持align-content，但实现有偏差：比如space-between可能把所有行挤在顶部，stretch行为也不稳定。更麻烦的是，它完全不识别space-evenly，会退回到stretch。
- 线上项目若需兼容IE11，避免用
space-evenly，改用space-around或JS计算补白 - 测试时务必在真实IE11环境验证，不能只看Can I Use的“支持”标记
- 如果用PostCSS autoprefixer，它不会为
align-content加前缀——IE11的问题得手动兜底
align-content就是个安静的摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
