flex-wrap: wrap 必须与 display: flex 同时使用，因它是 flex 容器的专属属性，未启用 flex 上下文时浏览器完全忽略；仅设 flex-wrap: wrap 无效，子元素仍强制单行溢出。
flex-wrap: wrap 为什么必须和 display: flex 一起用
单独写 flex-wrap: wrap 没效果——它只是 display: flex 的一个子属性，不启用 Flex 上下文，浏览器根本不会识别。常见错误是只加了 flex-wrap 却漏掉 display: flex，结果所有标签死扛在一行，容器横向溢出或出现滚动条。
实操建议：
- 父容器必须同时设
display: flex和flex-wrap: wrap - 别给容器设
white-space: nowrap，否则内部文字不折行，会进一步加剧撑宽 - 避免用
flex-direction: column配合flex-wrap做标签云——那是垂直堆叠，不是流式换行
gap 属性比 margin 更干净，但要注意兼容性
gap 是控制 Flex 容器内子项间距的首选，它不会像 margin 那样在换行时产生顶部/底部额外空白，也不会因 :last-child 或浮动遗留问题导致末项错位。
但 Safari 14.1 之前、IE11 完全不支持 gap 在 Flex 容器中的行为。实际项目中：
- 现代项目可直接用
gap: 0.5rem，简洁可靠 - 需兼容旧版 Safari（如 iOS 14）时，降级为
margin-right: 0.5rem; margin-bottom: 0.5rem，并给每行最后一项加margin-right: 0（用:nth-child(n)计算位置） - 绝对不要混用
gap和margin——它们叠加会导致间距翻倍
子标签为什么不能设 flex-grow: 1 或固定 width
flex-grow: 1 会让所有标签强行拉伸填满整行，短标签（如“AI”）被撑开，长标签（如“实时日志采集与分析”）反而被压缩变形；而 width: 120px 这类固定值会破坏“内容决定宽度”的自适应逻辑，小屏下直接溢出或触发非预期换行。
正确姿势是让每个标签保持弹性收缩能力：
- 子标签设
flex: 0 1 auto（不放大、可缩小、按内容宽） - 加
flex-shrink: 0仅在含图标且怕压缩时使用，但要同步配max-width防止过长 - 若需截断超长文本，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但必须搭配max-width（如max-width: 140px），否则无效
响应式缩放失真？问题常出在单位混用和断点逻辑上
用 font-size: 16px + padding: 8px 在手机上显得笨重，在桌面又太小；而单纯靠 @media (max-width: 768px) 切断点，无法适配折叠屏展开后比笔记本还宽的情况。
更鲁棒的做法：
- 内边距统一用
em（如padding: 0.3em 0.8em），随字体缩放自动调整 - 字号优先用
clamp(0.75rem, 2.5vw, 1rem)，兼顾最小可读性、视口比例、上限防过大 - 小屏下调
gap值（如从0.5rem→0.25rem），避免换行后行间空隙吞噬内容 - IE11 必须降级：改用
display: inline-block+font-size: 0父容器 hack，别硬扛 Flex
最易被忽略的是语义结构——标签云应该用 <div role="group" aria-label="话题标签"> 包裹，每个标签用 <code><a></a> 或 <span></span> 并带 role="link"，否则屏幕阅读器无法正确识别流式排列意图。
