flex-wrap: wrap 要生效必须同时满足三个前提：父容器设 display: flex、有明确宽度限制、子元素未强制 white-space: nowrap；否则不换行。
直接用 flex-wrap: wrap 就能实现，但只加这个属性几乎一定失败——它必须和 display: flex、父容器有明确宽度同时存在，缺一不可。
为什么 flex-wrap 加了也不换行？
根本不是属性失效，而是三个前提没凑齐：
- 父容器没设
display: flex（比如只写了flex-wrap: wrap，但容器仍是div默认的block） - 父容器宽度是
fit-content、auto或没设任何宽度限制，导致子项无限横向延展，根本“不溢出”，自然不触发换行 - 标签子元素自带
white-space: nowrap（如 Bootstrap 的.badge类），锁死单行，flex-wrap完全无从介入
Bootstrap 5 中怎么写才真正换行？
别依赖默认行为，显式控制关键点：
- 父容器用
class="d-flex flex-wrap"（确保display: flex+flex-wrap: wrap），再加width: 100%或max-width（例如class="w-100"） - 子标签用
class="badge bg-primary text-break"，并额外加自定义类重置white-space：.badge.force-wrap { white-space: normal !important; } - 避免混用
.col类——.col-4会强制占 33.33% 宽度，挤满一行就不换；改用.col-auto+flex-shrink-0 - 间距优先用
gap（如gap-2），旧版 Safari 需 fallback：margin-right: 0.5rem; margin-bottom: 0.5rem;+.badge:last-child { margin-right: 0; }
换行后标签上下错位怎么办？
这是 align-items: stretch（默认值）在作怪：同一行里高度不同的标签会被拉伸到该行最高项的高度，视觉上像错位。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
align-items: flex-start（即class="align-items-start"），所有标签顶部对齐 - 每个标签加
box-sizing: border-box和margin: 0，防止 padding/margin 累计偏差 - 长文本或 URL 要断行，不能只靠
text-break——必须同时清除white-space: nowrap，否则无效
最容易被忽略的是：你看到的“换行”，往往不是因为你写了 flex-wrap，而是某处子项的 flex-shrink: 0 或 min-width 把空间卡死了。真要调试，打开 DevTools 检查父容器最终计算出的 width 和子项的 computed flex-basis 值，比猜有用得多。
