Bootstrap中Flex布局需先用.d-flex开启，.d-inline-flex适用于行内场景；方向类需配合高度约束，对齐类作用于交叉轴，响应式类须与基础类共存。
Flex容器怎么开，.d-flex 和 .d-inline-flex 选哪个
不是所有元素加了 .d-flex 就能正常 flex 布局——它本质是给元素加 display: flex，但如果你套在 <span></span> 或 <a></a> 这类默认 display: inline 的标签上，又没重置 display，就可能被父容器的行内流干扰，导致换行或对齐异常。
实操建议：
- 块级容器（如
<div>、<code><section></section>）优先用.d-flex - 需要保持行内尺寸、又想内部 flex 的（比如按钮里图标+文字），用
.d-inline-flex - 别在已设
float或position: absolute的元素上硬加 flex 类，display 会冲突 - 加了
.flex-column，子项还是横着排（其实是 flex 容器本身被压缩到一行高度，没撑开） - 在 modal 或 card-body 里用 column，内容溢出不滚动（缺
.flex-shrink-0或.overflow-auto） - 垂直布局时，确保父容器有明确高度约束（比如
min-height: 300px或h-100） - 需要滚动的列区域，加
.overflow-auto；固定头部+滚动主体，用.flex-shrink-0+.flex-grow-1 - 别依赖
.flex-column-reverse做语义反转，它只改视觉顺序，DOM 顺序不变，影响可访问性和 tab 键序 - 主轴
row：子项高度不一致时，用.align-items-center让它们垂直居中对齐 - 主轴
column：子项宽度不一致时，.align-items-center让它们水平居中（即 margin: auto 效果） - 真要让 flex 容器自身在父容器里居中，得靠外层的
text-center（inline 元素）或mx-auto（块级 + width） - 在
.d-flex.flex-column容器里加.justify-content-center，结果内容贴顶——因为 column 主轴是垂直方向，justify-content管的是上下间距，但容器没高度，自然没空间可分 -
.align-self-start对margin: auto的子项无效，auto 会覆盖对齐类 - 每个断点都加一套类（比如
.d-flex .flex-sm-column .flex-md-row .flex-xl-column）不会明显拖慢渲染，但会让 HTML 显著变长，维护成本上升 - IE10/11 对
flex-wrap: wrap-reverse支持差，.flex-wrap-reverse类在旧浏览器里可能退化成wrap - 移动端小屏慎用
.flex-nowrap，内容超宽时容易触发横向滚动，且无法 pinch-zoom 缩放 - 先写最小屏样式（如
.d-flex .flex-column），再用.flex-md-row等向上覆盖 - 避免在同一个元素上混用冲突的方向类（比如
.flex-row .flex-lg-column），后者虽生效，但逻辑难追踪 - 调试时右键检查元素，看 computed 样式里
display和flex-direction是否如预期，比猜更可靠
.flex-row 和 .flex-column 的方向陷阱
Bootstrap 默认 .d-flex 是 flex-direction: row，也就是水平排列。但很多人一上来就加 .flex-column，结果发现子元素没垂直堆叠——因为父容器没设高度，或者子元素用了 flex-grow 却没配 min-height，浏览器无法计算“列方向”的可用空间。
常见错误现象：
实操建议：
对齐类命名反直觉：.align-items-center 不等于“让内容居中”
.align-items-* 控制的是 cross-axis（交叉轴）对齐，也就是主轴为 row 时管上下，主轴为 column 时管左右。新手常误以为加了 .align-items-center 就能让整个 flex 容器里的内容“在页面中居中”，其实它只对齐子项彼此之间的 cross-axis 位置。
使用场景：
容易踩的坑：
响应式 Flex 类怎么断点生效，.flex-md-row 为什么没反应
Bootstrap 的响应式 flex 类（如 .flex-sm-column、.flex-lg-row）只在对应断点及以上生效，而且必须和基础类（如 .d-flex）共存。单独写 .flex-md-row 没用，因为没开启 flex 上下文。
性能与兼容性注意点：
实操建议：
最常被忽略的是：Flex 工具类不解决内容溢出问题。哪怕排版再整齐，文字没换行、图片没 max-width: 100%、表格没 .table-responsive，照样破版。工具只是骨架，内容约束得自己补。
