必须先加 d-flex，否则所有 flex 类都无效；d-flex 是启动 Flex 布局的必要前提，对应 display: flex，缺它则 justify-content-、align-items- 等类全部被忽略。
必须先加 d-flex，否则所有 flex 类都无效
很多人写 justify-content-center 或 align-items-end 没反应，根本原因是父容器没加 d-flex。它不是可选装饰，而是启动 Flex 布局的开关——对应 CSS 的 display: flex。不加它，浏览器根本不把容器当 Flex 容器处理，后面所有对齐、排序、拉伸类全被忽略。
注意：.row 在 Bootstrap 5 中默认就是 display: flex，所以给 .row 加 d-flex 是冗余的；但如果你用的是普通 <div>、<code><section></section> 或旧版自定义容器，就必须手动加。
-
d-inline-flex用于需要保持行内尺寸的场景（比如按钮里图标+文字不换行） - 别在已设
float、position: absolute或display: table的元素上硬加d-flex，CSSdisplay值会冲突 - 如果容器本身高度为 0（比如没内容又没设
min-height），align-items-*看起来“没效果”，其实是没空间可对齐
justify-content-* 和 align-items-* 别搞反主轴和交叉轴
主轴方向由 flex-row（默认）或 flex-column 决定，它直接决定 justify-content-* 控制哪一维：flex-row 下它管左右，flex-column 下它管上下。而 align-items-* 始终控制另一维（交叉轴）。
常见错误：想让子元素垂直居中，却在 flex-row 容器里只加 justify-content-center——结果只是水平居中；正确做法是加 align-items-center。
-
justify-content-between要求至少两个子元素才看出“首尾贴边、中间等距”效果 -
align-items-baseline比align-items-center更适合表单控件对齐（如<label></label>和<input>底部对齐） - 响应式版本如
justify-content-md-center必须配合d-md-flex才生效，否则断点切换时直接失效
单个子元素破例对齐，用 align-self-*，但要注意覆盖规则
align-self-* 加在子元素自身上，用来覆盖父容器的 align-items-* 设置。但它不是无条件生效：如果父容器设了 align-items-stretch（Flex 默认值），align-self-center 就能起作用；但如果父容器是 align-items-baseline，那 align-self-center 会被压制，视觉上还是基线对齐。
典型使用场景：卡片列表中，只有某张卡片的标题要上对齐，其他保持默认拉伸，就在那个 <h3></h3> 上加 align-self-start，而不是去改整个 .row。
- 有效值只有
start、end、center、baseline、stretch，没有middle或vertical-center - IE10/11 对
align-self支持不稳定，需兼容时优先用mt-auto/mb-auto替代 - 别写成
self-align-center或align-item-self-center，Bootstrap 只认align-self-center
列顺序重排要用 order-*，但只对直接子元素生效
order-* 类通过 CSS 的 order 属性改变 Flex 子元素的视觉渲染顺序，数值越小越靠前。order-0 是默认值，所以不写也一样；order-first 和 order-last 是语义快捷写法。
最常失效的原因是：把 order-md-3 加在嵌套过深的元素上，比如 .row > .col > .card > h3，而 order 只作用于 Flex 容器的**直接子元素**（即 .col）。或者父容器根本不是 Flex（比如用了 .container 直接包 .col，跳过了 .row）。
- 检查开发者工具的 Computed 面板，确认目标元素的
order值是否被应用，且父容器display是flex - 响应式写法如
order-lg-1仅在 ≥992px 生效，小屏自动回退到未设置状态 - 避免和
float、position: absolute混用——这些会让元素脱离文档流，order失效
真正容易被忽略的是：Flex 工具类之间存在隐式依赖关系，比如 flex-column 不光改方向，还让 justify-content-* 从管左右变成管上下；而 align-self-* 的行为又取决于父级 align-items 的具体取值。不看这层逻辑，只靠试错，很容易陷入“加了类但没变化”的循环。
