关键是要给父容器设置 flex-wrap: wrap；需配合 display: flex、明确宽度及子项合理 flex 属性，避免 white-space: nowrap 和 flex-shrink: 0 等阻碍换行的设置。
关键就一条：给父容器加 flex-wrap: wrap。默认情况下，Flex 容器不会换行，所有子项硬挤在一行，超出就溢出或滚动——这不是 bug，是设计如此。
必须设置 flex-wrap: wrap
这个属性要写在父容器（比如标签云的包裹盒子）上，子元素上写无效：
- 父容器需有
display: flex和flex-direction: row（默认就是 row） - 加上
flex-wrap: wrap，浏览器才会在空间不够时把多余项推到下一行 - 别用
wrap-reverse，它会让换行方向颠倒，视觉上容易误判为没生效
父容器要有明确宽度限制
如果父容器没设宽度（比如 width、max-width 或被响应式祖先约束），它会无限撑宽，“空间不足”条件永远不触发，wrap 就形同虚设：
- 常见做法：
width: 100%、max-width: 1200px，或嵌套在响应式布局中 - 避免父容器使用
white-space: nowrap，否则会影响内部文本折行逻辑
子标签要“可收缩”且尺寸合理
标签本身得能随容器变化，不能死扛着不缩：
- 推荐用
flex: 0 1 auto或flex: 0 0 fit-content，允许缩小但不放大 - 设
min-width: 80px防止过窄，max-width: 140px防止单个撑满整行 - 避免
flex: 1或flex-shrink: 0，否则标签宁可溢出也不换行 - 文字别加
white-space: nowrap（除非你真想让标签内文字不折行）
增强体验的小建议
让换行更自然、更可控：
- 用
gap: 8px替代子项的 margin，布局更干净（注意旧版 Safari 对 gap 支持有限） - 字体大小可用
font-size: clamp(0.75rem, 4vw, 1rem)实现响应式缩放 - 小屏下可加媒体查询，调整
flex-basis，比如flex: 0 0 calc(50% - 8px)控制每行最多两个
