align-content-*类仅对多行flex容器生效，需配合flex-wrap且父容器在交叉轴有剩余空间才起作用；它控制多行间分布，而非单行内对齐。
align-content-* 类只对多行 flex 容器生效
如果你加了 flex-wrap: wrap（即 bootstrap 的 flex-wrap 或 flex-wrap-sm 等），但发现换行后的几行在交叉轴上还是挤在一起、没拉开间距，那大概率是误用了 align-items-* ——它只管**单行内子项**的交叉轴对齐；真正控制**多行之间**如何分布的，是 align-content-* 类。
这个类必须加在 Flex 容器（即有 d-flex 的父元素）上，且容器内必须实际发生换行（比如子项总宽 > 容器宽 + flex-wrap 启用），否则无效。
-
align-content-start：所有行贴在交叉轴起点（比如flex-direction: row时就是顶部对齐） -
align-content-end：所有行贴在终点（底部） -
align-content-center：所有行在交叉轴方向居中分布 -
align-content-between：首行顶上、末行压底，中间行等距分配 -
align-content-around：每行上下留等量间隙（行与边界、行与行之间间隙相等） -
align-content-evenly：所有间隙（包括首行前、末行后）完全等宽 —— Bootstrap 5.3+ 才支持
为什么 align-content-* 加了也没反应？
最常见原因是容器没“高度余量”——align-content 不是让内容变高，而是把已存在的多行，在父容器的**剩余交叉轴空间**里重新分配位置。如果父容器高度刚好被内容撑满（比如没设 min-height、h-100 或 vh-100），那就没有“剩余空间”可分配，所有 align-content-* 都会失效。
- 检查父容器是否显式设置了高度约束，例如
min-vh-100、h-75或style="height: 400px" - 确认子项确实发生了换行：临时加
border或背景色，看是否出现两行及以上 - 别和
align-items-*混用还期望效果叠加 —— 二者作用对象不同，不会冲突，但目标不一致 - 响应式类如
align-content-md-between要求对应断点下也启用了flex-wrap-md，否则小屏仍为单行，类不触发
两行内容想上下等距撑开，用 between 还是 around？
两行时 align-content-between 和 align-content-around 视觉差异明显：between 是首行紧贴顶、末行紧贴底，中间无空隙；around 则是顶/底各留一份间隙，两行中间再留一份，共三份等量空隙。多数场景下 around 更均衡。
- 若容器高度固定（如
h-50），且你希望两行文字视觉上“呼吸感”更强，优先选align-content-around -
align-content-between更适合全屏卡片布局，要求内容严格顶底锚定 - Bootstrap 5.2 及更早版本不支持
align-content-evenly，别在低版本项目里写，会静默忽略
在 .row 里用 align-content-* 要特别注意什么？
.row 默认是 d-flex flex-wrap，但它自身高度由内容决定，极少有多余垂直空间。所以直接给 .row 加 align-content-center 几乎永远没效果 —— 它不是 bug，是设计使然。
- 真要控制栅格行内多行列的垂直分布，应该把目标区域单独抽成一个
d-flex flex-wrap align-content-around h-100容器，而不是强塞进.row - 如果必须用
.row，得确保它的父容器（如.container）有明确高度，并给.row加h-100，否则align-content-*无参照系 - 别在
.row上同时用align-items-center和align-content-around—— 前者影响每列内部，后者影响列与列之间的行分布，容易互相干扰判断
对齐多行内容的关键不在“写了什么类”，而在“有没有留给它发挥的空间”。align-content-* 是个安静的调度员，只在空间富余时才出手；一旦父容器高度被内容吃干抹净，它就彻底失语。
