Flex对齐类在.row上常无效，因缺高度约束或层级错误；应优先让.col变Flex容器再对齐，而非依赖.row；justify-content-between需3元素才合理，2元素时用ms-auto更精准。
align-items-center、justify-content-between 这类工具类本身没毛病，但直接加在 .row 上常没效果——根本原因不是写错了，而是缺了高度约束或 Flex 容器层级不对。
为什么 align-items-* 在 .row 上不生效
Flex 对齐类依赖父容器是真正的 Flex 容器，且必须有可对齐的“空间”。.row 默认是 d-flex，但它自身高度由内容撑开，没有额外垂直空间，align-items-center 就只能把子项（即 .col）挤在顶部。
- 给
.row加h-100或vh-100，前提是它的父容器（比如.container）也设了明确高度 - 更稳妥的做法：不靠
.row垂直对齐，而是把目标.col自身变成 Flex 容器（加d-flex），再用align-items-end控制内部按钮/文字到底部 - 别在
.row上同时加flex-column和align-items-center——主轴变成垂直后，align-items控制的是水平对齐，容易混淆方向
justify-content-* 的常见误用与响应式要点
justify-content-between 看起来很适合“两边各一个按钮”，但若容器内只有两个元素，它会让中间空出巨大间隙；而 ms-auto 才是更精准的右推方案。
-
justify-content-start/end/center适用于多个同级元素的整体分布 -
justify-content-between要求至少 3 个元素才能体现“均匀分隔”效果；2 个元素时首尾贴边，中间空白不可控 - 响应式变体如
justify-content-md-center只在 ≥768px 生效，小屏自动回退到默认（start），无需额外重置 - 避免在 navbar 中对
.navbar-nav用justify-content-around—— 字母间距会随屏幕缩放异常拉伸，ms-auto更稳定
align-self-* 和 align-items-* 的区别在哪
align-items-* 是父容器统一设置所有子项的交叉轴对齐方式；align-self-* 是单个子元素覆盖父级设定，优先级更高。实际中后者用得少，但关键场景不能漏。
- 当某列（
.col）里有个图标要底部对齐，其余文字顶部对齐：给图标所在元素加align-self-end，而不是改整个.row -
align-self-stretch是默认行为，通常不用显式写；但若父容器设了align-items-start，又想某个子项填满高度，就得单独加align-self-stretch - 注意：只有 Flex 子项才响应
align-self，如果元素被包裹在非 Flex 容器里（比如普通div没加d-flex），这个类完全无效
Flex 方向类（flex-row-reverse、flex-column）的隐藏限制
flex-row-reverse 不只是“镜像”，它会改变键盘 Tab 顺序和屏幕阅读器遍历逻辑。视觉上右对齐了，但语义顺序反了，无障碍支持可能断裂。
- RTL 页面（
dir="rtl"）下，flex-row本身就等效于 LTR 下的flex-row-reverse，不必手动加 -
flex-column+justify-content-center是实现“垂直居中卡片内容”的常用组合，但记得给卡片加min-height，否则内容少时仍会塌陷 -
flex-wrap默认开启，遇到窄屏会换行；若要强制单行（比如导航栏菜单），必须配flex-nowrap，否则justify-content-evenly在小屏下会错乱
真正卡住人的从来不是类名记不住，而是没意识到：Flex 类只对**直接子元素**起作用，且高度、方向、换行这三者必须协同控制——少一个，对齐就失效。
