flex-wrap: wrap 必须配合 display: flex 才生效，单独使用无效；常见不换行是因缺失 display: flex、容器无宽度限制、子项 white-space: nowrap 或 flex-shrink: 0 等导致。
flex-wrap: wrap 必须和 display: flex 同时存在才生效，单独写它等于没写。
为什么写了 flex-wrap: wrap 还是不换行
常见现象是所有标签挤成一长条、横向溢出或触发滚动条。这不是 flex-wrap 失效，而是它根本没被激活：
-
display: flex缺失——这是最常漏掉的前提，flex-wrap只在 Flex 容器内起作用 - 容器没有明确宽度（如
width: 100%或max-width），Flex 默认会尽可能撑宽自己，没“换行依据” - 子标签含
white-space: nowrap（某些 UI 库或重置样式默认设了），导致文字不折行，标签无法压缩 - 子标签设了
flex-shrink: 0或min-width: auto，拒绝收缩，硬顶着不换
gap 和 margin 在标签云中怎么选
gap 更干净、语义清晰，但 IE11 不支持；margin 兼容性好，但换行时容易错位。真实项目里得看目标环境：
- 现代项目（Chrome/Firefox/Safari/Edge ≥ 2024）：直接用
gap: 8px，无需兜底 - 需兼容 IE11 或老版 Safari：改用
margin-right: 8px; margin-bottom: 8px，再加:last-child { margin-right: 0; }—— 注意只清right，不清bottom，否则换行后行间没间距 - 绝对别用
:first-child清左距，换行后第二行第一个标签会被误清，导致对不齐
标签尺寸不一致时如何避免换行后错位
小标签换到第二行后左侧留白、行高参差、视觉松散——这通常不是 flex-wrap 的问题，而是默认 align-items: stretch 拉伸 + 子项未统一基线导致的：
- 给容器加
align-items: flex-start，让所有标签顶部对齐 - 子标签统一设
margin: 0和box-sizing: border-box，避免 padding/margin 累加偏差 - 若字体大小动态变化（如按热度缩放），必须加
max-width: 120px+overflow: hidden+text-overflow: ellipsis防止撑开 - 慎用
flex: 1或flex-grow: 1，它们会让标签强行拉伸填满空间，破坏“云”的自然疏密感
Safari 下 flex-wrap 标签云偶尔卡住不换行
这是 Safari 15.4–16.4 的已知渲染 bug：当容器有 overflow: hidden 且子项含 border-radius 或 transform 时，flex-wrap 可能完全失效，表现就是标签横向堆死、无法折行。
- 优先去掉容器的
overflow: hidden（如果只是为圆角，可用clip-path: inset(0 round 8px)替代） - 避免给标签本身加
transform: scale()或rotate()，这类操作会干扰 Safari 的 Flex 换行计算 - 临时修复可加
will-change: transform或backface-visibility: hidden强制图层提升
真正难处理的不是怎么写，而是不同字号标签混排时，人眼感知的“密度”并不随像素间距线性变化——这点在小屏上尤其明显，但 CSS 本身没有密度感知能力，只能靠 clamp() 和 vmin 做比例缩放逼近。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
