Flex容器需显式添加flex-wrap才能换行，.d-flex默认nowrap；多行垂直居中须用align-content-center而非align-items-center，且需容器有高度余量并启用换行。
Flex容器必须显式加 flex-wrap 才能换行
Bootstrap 的 .d-flex 默认是 flex-wrap: nowrap，哪怕内容超出容器宽度，也不会折行——它只会横向溢出或滚动。你不能指望 .row 的行为自动迁移到自定义 .d-flex 容器上。.row 是特例，它默认启用了 flex-wrap: wrap；而 .d-flex 只负责开启 Flex 布局，不附带换行逻辑。
要让子项在宽度不足时自动换行，必须手动加 flex-wrap 类：
-
<div class="d-flex flex-wrap">...</div>—— 全断点启用换行 -
<div class="d-flex flex-wrap-md">...</div>—— 仅中屏及以上换行（需确认 Bootstrap 构建版本含响应式类） -
<div class="d-flex flex-wrap-reverse">...</div>—— 换行方向反转（最后一行在顶部）
⚠️ 常见错误：只加 d-flex 和 align-items-center，却漏掉 flex-wrap，结果文字或卡片挤成一行、撑破容器。
align-items-center 对单行有效，多行需改用 align-content-center
align-items-center 控制的是“每行内部子项在交叉轴上的对齐”，即它让每一行里的所有项目都垂直居中——但前提是这些项目在同一行内。一旦发生换行，align-items-center 不会影响“行与行之间的垂直分布”。此时若想让多行整体在容器里垂直居中（比如三行内容上下留白均等），必须用 align-content-center（或 align-content-around / align-content-between）。
但注意：align-content-* 类生效有硬性前提：
- 父容器必须是 Flex 容器（已加
d-flex） - 必须已启用换行（已加
flex-wrap） - 容器在交叉轴（默认为纵轴）上要有剩余空间——即容器高度 > 所有行内容总高度
如果容器高度刚好被内容撑满（例如没设 min-height 或 min-vh-100），align-content-center 会完全无效。推荐搭配 min-vh-100 或 h-100 使用。
长文本/无空格内容会破坏换行效果
即使加了 flex-wrap，像 UUID、URL 或连续中文段落这类无自然空格的内容，默认仍会整块溢出——因为子元素自身设置了 white-space: nowrap（如 .badge、.text-truncate 或原生 <span></span>），压制了 Flex 的换行能力。
解决方法不是调 Flex 类，而是重置文本行为：
- 给子元素加
text-break类，并确保其white-space被覆盖：style="white-space: normal;" - 或写轻量自定义类：
.force-wrap { white-space: normal !important; }，再加到对应元素上 - 避免混用
text-nowrap或text-truncate——它们和换行互斥
⚠️ 别指望 text-break 单独生效：它依赖 overflow-wrap: break-word，而该属性会被 white-space: nowrap 直接屏蔽。
垂直居中 + 自动换行的典型结构组合
常见需求是：一组卡片或标签，在容器内既能随屏幕宽度自动换行，又整体垂直居中显示。这时不能只靠 align-items-center，得组合使用：
<div class="d-flex flex-wrap align-content-center justify-content-center min-vh-100"> <div class="bg-primary text-white px-4 py-2 m-1">Item 1</div> <div class="bg-secondary text-white px-4 py-2 m-1">Item 2</div> <div class="bg-success text-white px-4 py-2 m-1">Long item with no space</div> </div>
关键点：
-
flex-wrap开启换行 -
align-content-center让多行整体垂直居中（不是每行居中） -
justify-content-center让每行内部水平居中 -
min-vh-100提供可靠的垂直参照高度 - 子元素加
m-1避免换行后紧贴边缘，也可用gap-2替代
如果子项本身是块级且高度不一，align-content-center 仍可能视觉偏移——这时更适合把整个容器设为 d-grid place-items-center，但会失去 Flex 的换行控制能力。选哪种，取决于你更需要“可控换行”还是“绝对居中”。
