<p>align-content-* 无效的三大主因是容器未换行、交叉轴无剩余空间、类名加错对象；它仅对多行 Flex 容器生效，需配合 flex-wrap 和足够交叉轴高度，且必须作用于父容器而非子项。</p>
加了 align-content-* 没反应，基本是因为容器没换行、没高度余量，或类名写错——它不控制单行内对齐，只管多行之间怎么分布。
为什么 align-content-* 类加了却没效果
最常见原因有三个：容器根本没换行、交叉轴没有剩余空间、类名用在错误对象上。
-
align-content-*只对多行 Flex 容器生效，而默认flex-wrap: nowrap，必须显式加flex-wrap（Bootstrap 中是flex-wrap或响应式变体如flex-md-wrap） - 父容器在交叉轴方向（通常是垂直方向）必须有“空余高度”：比如没设
min-vh-100、h-100或固定height，内容刚好撑满时，所有align-content-*都会静默失效 - 这个类必须加在 Flex 容器（即带
d-flex的父元素）上，不是加在子项上；也不能和align-items-*混淆——后者管单行内子项的交叉轴对齐，二者目标完全不同
align-content-between 和 align-content-around 的实际区别
两行内容时，视觉差异非常明显，选错会导致“看起来没居中”或“顶部/底部太空”。
-
align-content-between：首行紧贴交叉轴起点（如顶部），末行紧贴终点（如底部），中间无额外间隙——适合强调锚点的布局，比如工具栏+操作区 -
align-content-around：首行前、行与行之间、末行后，三段间隙等宽——两行时更均衡，多数卡片标签组、按钮组场景推荐它 -
align-content-evenly（Bootstrap 5.3+）：四段间隙完全等宽（首前、行间×2、末后），三行及以上时比around更匀称；旧版本直接忽略该类
响应式下如何让换行对齐按断点生效
响应式类不是自动继承的，必须确保“换行行为”和“对齐行为”在同一个断点下同时启用。
- 写了
align-content-md-between，但小屏下仍为单行？检查是否漏了flex-wrap-md——没有换行，align-content就没作用对象 - 别只写
flex-md-row就以为能触发对齐：必须配套d-md-flex，否则容器根本不是 Flex 上下文，所有justify/align类都无效 - 断点覆盖要连续：比如希望 xs 竖排、sm 起横排且换行、md 起多行垂直居中，就得组合
flex-column flex-sm-row flex-sm-wrap align-content-md-center
想让换行后的内容“呼吸感更强”，但 align-content-around 还是挤在一起
问题不在类本身，而在子项高度或容器约束没处理好。
- 子项高度不一致（比如混用
.btn和纯文本<span>），align-content-*仍会生效，但视觉上“行”被拉得参差——此时优先统一子项高度，或加align-items-baseline对齐文字基线 - 容器用了
h-50这类固定高度类，但子项总高度已接近上限，剩余空间不足 20px，around分出来的每份间隙就极小，肉眼难辨；建议改用min-h-50或min-vh-100留出余量 - 别在子项上同时用
flex-grow-1和min-width：前者会强行拉伸占满，破坏换行前提；应选flex-shrink-1（即flex: 0 1 auto）配合min-width
