d-flex 是 flex 布局的唯一开关，缺失则 justify-content-center、align-items-end 等所有对齐类全部失效；它对应 display: flex，用于块级容器，且必须配合父容器明确高度才能实现垂直居中。
d-flex 是 Flex 布局的唯一开关
没它，justify-content-center、align-items-end 全部失效——浏览器根本不会把元素当 Flex 容器处理。很多人写 <div class="justify-content-center"> 却没反应，根源就在这儿。<ul><li>
<code>d-flex 对应 display: flex，适合块级容器（如 <div>、<code><section></section>）
d-inline-flex 对应 display: inline-flex，适合按钮内图标+文字这类需保持行内尺寸的场景float、position: absolute 或 display: table 的元素上硬加 d-flex，display 值会冲突，布局直接崩坏.row 默认就是 display: flex，此时再加 d-flex 是冗余的；但若你把 .row 换成普通 <div>，就必须手动加 <code>d-flexflex-row 和 flex-column 决定主轴方向，直接影响对齐类作用轴
主轴方向错了，justify-content-* 就会“对齐错轴”。比如想让子项上下居中，却在默认 flex-row 下用 justify-content-center，结果只是左右居中。
-
flex-row：主轴水平（左→右），justify-content-*控制左右，align-items-*控制上下 -
flex-column：主轴垂直（上→下），justify-content-*控制上下，align-items-*控制左右 - 加了
flex-column但子项还是横着排？大概率是父容器没高度约束（比如缺min-height或h-100），Flex 容器自身被压缩成一行高，没空间可分配 -
flex-column-reverse只翻转视觉顺序，DOM 顺序和 tab 键序不变，影响可访问性，慎用于语义关键区域
justify-content-* 和 align-items-* 别混用错轴
justify-content-center 不等于“让整个容器居中”，它只管子元素在主轴上的分布；align-items-center 也不是“让内容在页面里居中”，它只控制子元素在交叉轴上的对齐位置。
- 单个子元素要破例对齐？用
align-self-center，但它会被父级align-items覆盖（如父级是align-items-stretch，align-self-center才有效） -
justify-content-between需要至少 3 个元素才合理；2 个元素时中间空隙不可控，改用ms-auto推右边那个更精准 - 想让两个按钮一左一右撑满？用
ms-auto推右边那个，而不是给左边加me-auto（会挤出视口） - 在
flex-column容器里加justify-content-center却贴顶？检查容器是否有足够高度，否则“居中”无从谈起
响应式 Flex 类必须配对使用
响应式 Flex 类（如 justify-content-md-center）必须与对应断点的 d-md-flex 配合使用，否则小屏/大屏行为不一致，甚至完全失效。
-
d-md-flex+justify-content-md-center：仅在 ≥768px 生效；小屏自动回退到默认justify-content-start -
flex-md-row在移动端默认的flex-column-reverse上叠加后，会覆盖并切换为主轴水平布局 - 断点前缀要匹配：md 对应 ≥768px，lg ≥992px，sm ≥576px；顺序不能颠倒（如
col-sm-12 col-md-6正确，col-md-6 col-sm-12可能被覆盖） - 避免三层以上
d-flex套用——对齐逻辑极易混乱，建议拆成独立组件或改用原生 CSS Grid
真正卡住人的从来不是类名记不住，而是忘了 d-flex 这个前提，或者没给父容器设高度。这两个点漏掉一个，后面所有对齐类都像在真空中跳舞。
