加了flex-wrap: wrap却不换行，主因是容器未设明确宽度约束（如width: 100%）且子项默认white-space: nowrap；必须同时限制容器宽度并显式设置white-space: normal或word-break: break-word。
加了 flex-wrap: wrap 标签还是不换行？不是写错了，而是容器没“被限制宽度”，子项又默认 white-space: nowrap —— 这两个问题不解决，再怎么调 CSS 都白搭。
为什么 flex-wrap: wrap 看似生效却无换行效果
Flex 容器默认会无限撑宽自己，哪怕父容器只有 300px，它也可能硬拉出 1200px 把所有标签排成一横排。这不是 bug，是 Flex 的默认行为。
- 必须给容器设明确宽度约束：
width: 100%、max-width: 600px或inline-size: fit-content - 每个标签要显式覆盖浏览器默认的
white-space: nowrap，改用white-space: normal或word-break: break-word - 避免对标签加
display: inline-block或float，它们会让元素脱离 Flex 流，flex-wrap失效 - Safari 15.4–16.4 有已知 bug：容器同时设
overflow: hidden和border-radius会导致换行失效
gap 和 margin 哪个更适合标签云间距
gap 写法干净、语义清晰，但 IE11 不支持；margin 兼容性好，但容易在换行后出现首尾错位或行间空隙异常。
- 现代项目优先用
gap: 8px（注意：Flex 中gap-y无效，只认单值gap） - 需兼容旧浏览器时，用
margin-right: 8px; margin-bottom: 8px;，再加.tag:last-child { margin-right: 0; } - 绝对不要用
:first-child清左/上边距——换行后第二行第一个标签会被误清，导致对不齐 - IE11 下若用 Flex，需补
_ms-flex-preferred-size: auto防坍缩
响应式缩放时字号、间距、换行点怎么同步收缩
只调 font-size 是最危险的做法：小屏下短标签留白爆炸，长标签又挤成一团，视觉密度完全失控。
- 字号推荐用
font-size: clamp(0.75rem, 4vw, 1rem)，防过小也防过大 - 间距统一用相对单位：
gap: clamp(4px, 2vmin, 8px)或抽 CSS 变量--scale: 1，其他地方写calc(var(--scale) * 8px) - 慎用
font-size: clamp()直接套在标签上——内容长度差异大时，缩放后短标签稀疏感明显；建议包裹一层<span></span>单独控制 - 容器 padding 要预留足够余量：
gap不作用于边缘，不加内边距会导致标签紧贴边界，看起来“挤”
真正难的不是写出那几行 Flex 代码，而是 Safari 的渲染 bug、IE11 的坍缩逻辑、不同长度标签在缩放下的密度失衡——这些细节不逐个验证，上线后用户看到的就是一堆错位、溢出、或干脆不换行的标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
