flex-wrap: wrap没生效的主因是只设display: flex而漏写该属性，且父容器缺明确宽度；必须三者齐备：display: flex、flex-wrap: wrap、width/max-width限制，缺一则换行失效。
flex-wrap: wrap 为什么没生效
标签云不换行，90% 是因为只写了 display: flex 却漏了 flex-wrap: wrap。Flex 容器默认是 flex-wrap: nowrap，哪怕子项撑出屏幕也不会折行——这不是性能问题，是开关根本没打开。
必须同时满足三点：
- 父容器设 display: flex
- 显式写 flex-wrap: wrap（或 flex-flow: row wrap）
- 父容器有明确宽度（width: 100%、max-width: 600px 等），否则浏览器找不到“该在哪换”
常见干扰项：
- 子标签带 white-space: nowrap（某些 UI 库重置样式里默认加了），需覆盖为 white-space: normal
- 子标签设了 flex-shrink: 0 或 min-width: auto，拒绝压缩，硬顶着不换
- DevTools 中 flex-wrap 被划掉（strikethrough），说明值无效（比如误写成 flex-flow: wrap row）
动态增删时新标签不参与布局
JS 用 appendChild 或框架（如 React）渲染后，新标签挤在一行、不换行、间距错乱，通常不是 Flex 失效，而是新增节点没继承正确的弹性行为。
关键检查点：
- 新增的 DOM 节点必须带 class（如 .tag），且该 class 已定义 flex: 0 1 auto 或至少 flex-shrink: 1
- 避免用 innerHTML += 拼接，它会销毁并重建整个子树，丢失原有 flex 样式上下文
- 若用 React/Vue，确保 key 唯一且稳定；key 错乱会导致 diff 时复用旧节点，样式残留
推荐初始化写法：
const tag = document.createElement('span');<br>tag.className = 'tag';<br>tag.textContent = 'new tag';<br>container.appendChild(tag);
换行后标签上下不对齐、末行稀疏
这是 align-items: stretch（默认值）和 justify-content: space-between 共同导致的视觉陷阱：同一行高度不等的标签被拉伸对齐，而 space-between 只作用于单行，末行空荡。
正确做法：
- 父容器加 align-items: flex-start，让所有标签顶部对齐
- 用 gap: 0.5rem 控制间距（现代项目），比 margin 更干净，且不产生行尾多余空白
- 避免 justify-content: space-between；它不适合多行场景，改用 justify-content: flex-start 即可
- 若需末行也紧凑，别靠 CSS 对齐逻辑硬调——Flex 本身不跨行均衡，真要两端对齐得用 text-align: justify + ::after 伪元素补全（仅静态场景）
响应式缩放失真或 Safari 渲染卡死
小屏文字堆叠、大屏间距过大，或 Safari 下标签横向锁死不换行，根源不在 flex-wrap 本身，而在字体度量与渲染边界处理。
实操要点：
- 字体大小用 font-size: clamp(0.75rem, 4vw, 1rem)，避免固定像素值
- 间距统一用 gap: clamp(0.25rem, 2vw, 0.5rem)，最小不低于 0.25rem（iOS Safari subpixel 渲染易跳变）
- Safari 15.4–16.4 有已知 bug：父容器含 overflow: hidden + 子标签带 border-radius 或 transform 时，flex-wrap 可能静默失效；临时解法是用 clip-path: inset(0 round 8px) 替代 overflow: hidden
- 长文本标签加 word-break: break-word + white-space: normal，禁用 white-space: nowrap，否则换行逻辑被绕过
真正难的不是写几行 flex 属性，而是让不同字号、不同长度、不同渲染引擎下的文字，在换行边界上保持一致的呼吸感——这需要反复在真机上测 subpixel 行为，而不是只看桌面 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
