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');
tag.className = 'tag';
tag.textContent = 'new tag';
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 下标签云偶尔卡住不换行，本质是渲染边界条件未处理。
实操要点：
- 字体用
font-size: clamp(0.75rem, 2.5vw, 1rem)，而非固定像素 - 间距统一用
gap: 0.75rem，避免混用margin和gap - 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 换行计算
真正难的不是让标签换行，而是换行后每行高度一致、字距呼吸感合理、小屏不重叠大屏不空洞——这些细节全靠 gap、flex-shrink、word-break 和 clamp() 四者咬合到位。
