d-flex 是 Flex 布局的唯一开关，缺失则 justify-content-center、align-items-end 等所有对齐类全部失效；它对应 display: flex，用于块级容器，且必须配合父容器明确高度才能实现垂直居中。

d-flex 是 Flex 布局的唯一开关

没它，justify-content-center、align-items-end 全部失效——浏览器根本不会把元素当 Flex 容器处理。很多人写

却没反应，根源就在这儿。

• d-flex 对应 display: flex，适合块级容器（如
  、

  ）
• d-inline-flex 对应 display: inline-flex，适合按钮内图标+文字这类需保持行内尺寸的场景
• 别在已设 float、position: absolute 或 display: table 的元素上硬加 d-flex，display 值会冲突，布局直接崩坏
• .row 默认就是 display: flex，此时再加 d-flex 是冗余的；但若你把 .row 换成普通
  ，就必须手动加 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 也不是“让内容在页面里居中”，它只控制子元素在交叉轴上的对齐位置。

  • 单个子元素要破例对齐？用 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 配合使用，否则小屏/大屏行为不一致，甚至完全失效。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • 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 这个前提，或者没给父容器设高度。这两个点漏掉一个，后面所有对齐类都像在真空中跳舞。