align-content仅在多行flex容器中生效，需同时满足display: flex、flex-wrap: wrap及交叉轴有剩余空间；它分配行间剩余空间而非设置固定间距，单行时无效。
align-content 能解决“多行 Flex 容器中各行整体上浮/下沉/撑满”的视觉问题，但它不控制像素级行间距；真要设固定距离，得用 row-gap。
align-content 为什么经常没反应
它只在满足全部三个条件时才起作用：
- 父容器
display: flex且flex-wrap: wrap（或wrap-reverse） - 子项实际换行了（总宽度 > 容器宽度，或总高度 > 容器高度）
- 容器设置了明确的交叉轴尺寸（比如
height或max-height），否则没有“剩余空间”可分配
常见误操作：容器高度由内容撑开，align-content: space-between 看不出变化；或者只有一行子项，属性直接被忽略。
align-content 的取值效果和适用场景
它的本质是“分配容器交叉轴上的剩余空间”，不是插空白：
-
align-content: flex-start—— 所有行挤在顶部，消除“上下行间隔太大”的错觉（最常用） -
align-content: space-between—— 第一行顶对齐、最后一行底对齐，中间行等距分布；适合固定高度容器里做呼吸感布局 -
align-content: space-around—— 每行上下留相同空白，视觉更宽松，但首尾行离容器边缘的距离是中间行间距的一半 -
align-content: stretch（默认）—— 行被拉伸填满容器高度，常导致子项莫名变高，是“行间距异常”的元凶之一
注意：align-content 对单行容器无效，也不影响子项自身的 margin 或 padding。
和 row-gap 混用时容易踩的坑
两者可以共存，但效果叠加后可能违背直觉：
-
row-gap: 12px会在行与行之间插入 12px 空白，但align-content: space-between会把这 12px 空白也纳入“剩余空间”重新分配 - 如果容器高度固定，又同时设了
row-gap和align-content，最终行位置由二者共同决定，调试困难 - 想精确控制行间距离？优先只用
row-gap，并确保容器高度由内容撑开（避免align-content干预）
真正容易被忽略的是：当子项高度不一致时，row-gap 依然生效，但 align-content 的“行块”概念会因每行基线不同而显得错位——这时别硬调 align-content，先统一子项高度或改用 grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
