<p>d-flex 是启用 Flex 布局的前提，缺它则所有 justify-content-、align-items- 等类均无效；主轴方向由 flex-row/flex-column 决定，影响对齐类作用轴；响应式 Flex 类（如 justify-content-md-center）必须与对应断点的 d-md-flex 配合使用。</p>
d-flex 是启动 Flex 布局的唯一入口，没它，后面所有 justify-content-*、align-items-* 都不生效。
必须加 d-flex 才能用其他 Flex 类
很多人在 <div class="justify-content-center"> 上直接写对齐类，结果完全没反应——因为没设 d-flex，浏览器根本没把它当 Flex 容器处理。
-
d-flex对应display: flex，适用于块级容器（如<div>、<section>） -
d-inline-flex对应display: inline-flex，适合按钮内图标+文字这类需保持行内尺寸的场景 - 别在已设
float、position: absolute或display: table的元素上硬加d-flex，display 值会冲突，导致布局崩坏 -
.row默认就是display: flex，此时再加d-flex是冗余的；但如果你把.row换成普通<div>，就必须手动加d-flex
flex-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 也不是“让内容在页面里居中”，它只控制子元素在交叉轴上的对齐位置。
- 想让两个按钮一左一右撑满？用
ms-auto推右边那个，而不是给左边加me-auto（会挤出视口） - 在
flex-column容器里加justify-content-center却贴顶？检查容器是否有足够高度，否则“居中”无从谈起 - 单个子元素要破例对齐？用
align-self-center，但它会被父级align-items覆盖（如父级是align-items-stretch，align-self-center才有效） -
align-items-baseline在表单场景很实用，能让输入框和 label 文字底部对齐，比center更自然
响应式 Flex 类必须配对使用
像 justify-content-md-center 这类带断点前缀的类，只在 ≥768px 生效；但如果父容器没同时加 d-md-flex，那在中屏下它压根不是 Flex 容器，对齐类就彻底失效。
- 断点类不是独立开关，它依赖对应断点下的 Flex 容器状态
- 小屏隐藏某列？别只写
d-none，优先用d-sm-flex d-md-none显式控制 Flex 状态，避免 display 冲突 -
.gap-3只在display: flex或display: grid容器上生效，.container.gap-3白写；且别和me-3同时用在子项上，否则间隙翻倍 - IE10/11 对
align-self支持差，若需兼容，用mt-auto mb-auto替代align-self-center
真正卡住人的往往不是类名记不住，而是忘了 d-flex 是前提、主轴方向决定对齐类作用域、响应式类必须和 d-*-flex 共存——这三个点漏一个，布局就静默失效。
