flex-wrap: wrap 未生效的主因是父容器无宽度、子元素含 white-space: nowrap 或 min-width: auto 阻止收缩；须设 width/max-width、清除 nowrap、加 flex-shrink:1 与 min-width:0，并显式写 flex-flow: row wrap。
flex-wrap: wrap 为什么没生效
常见现象是文字挤成一长条、溢出容器，明明写了 flex-wrap: wrap 却不换行。根本原因通常是父容器没设宽度，或子元素（标签）用了 white-space: nowrap（比如某些 UI 库默认禁用换行），又或者子元素设置了 min-width: auto 导致弹性项拒绝收缩。
实操建议：
- 给父容器明确设置
width或max-width，比如width: 100%或max-width: 600px - 确保每个标签元素没有强制禁用换行的样式，检查并覆盖掉
white-space: nowrap - 给子元素加
flex-shrink: 1和min-width: max-content（或更稳妥的min-width: 0），避免因内容过长卡死换行逻辑 - 别只写
display: flex，必须显式声明flex-flow: row wrap，因为flex-flow是flex-direction和flex-wrap的复合属性，缺一不可
flex-flow: row wrap 和 flex-flow: wrap row 有区别吗
有，而且会直接导致换行失效。CSS 中 flex-flow 的语法顺序是 flex-direction 在前、flex-wrap 在后，即 flex-flow: row wrap 合法，而 flex-flow: wrap row 是无效值，浏览器会忽略整条声明，回退到默认的 flex-wrap: nowrap。
实操建议：
- 永远按
flex-flow: [direction] [wrap]顺序书写，合法组合只有：row wrap、row nowrap、column wrap等 - 不要依赖“看起来像”的写法，CSS 不做语义推断；无效值不会报错，但也不会生效
- 在 DevTools 里检查该属性是否被划掉（strikethrough），这是最快速的验证方式
标签文字长短不一，怎么避免换行后出现大片空白
纯 flex 布局下，justify-content: space-between 或 space-around 在换行时只作用于当前行，无法跨行对齐，容易造成末行稀疏、视觉失衡。这不是 bug，而是 flex 的设计逻辑——它按行布局，不全局均衡。
实操建议：
- 放弃靠
justify-content拉齐多行，改用text-align: justify+ 伪元素补全（适合静态标签云） - 更可靠的做法：用
display: inline-block配合text-align: justify，并在容器末尾加::after { content: ""; display: inline-block; width: 100%; }触发两端对齐 - 如果必须用 flex，可配合 JavaScript 动态计算每行剩余空间，但成本高、响应式下易出错，不推荐轻量级标签云使用
IE11 下 flex-wrap 不兼容怎么办
IE11 支持 flex-wrap，但存在两个经典坑：一是不支持 flex-flow 缩写（会完全忽略），二是对 min-width: 0 处理异常，导致子元素不收缩、换行失败。
实操建议：
- 拆开写，不用
flex-flow，改用独立声明：display: -ms-flexbox（IE前缀）+-ms-flex-wrap: wrap+flex-direction: row+flex-wrap: wrap - 给子元素加
min-width: 0的同时，补上 IE 专用的-ms-flex-negative: 1 - 测试时务必在真实 IE11 环境中验证，Edge 浏览器模拟不等于 IE11 行为
标签云看着简单，但 flex 换行的临界条件很敏感：一个没设宽、一个 nowrap、一个 min-width、一个 IE 前缀漏写，都可能让整排崩掉。调的时候别只盯 flex-wrap，得顺着渲染流一路查上去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
