flex-wrap: wrap 不生效的根本原因是 min-width: auto、white-space: nowrap 和父容器无明确宽度这三个盒模型约束未解除，需同步设置 min-width: 0、white-space: normal 和 width/max-width 才能触发换行。
flex-wrap: wrap 不换行，90% 是盒模型属性在暗中干扰——不是没写，是写了但被 min-width、white-space 或父容器尺寸覆盖掉了。
为什么 flex-wrap: wrap 写了却像没写一样
典型现象是所有标签横向堆成一长条、溢出容器右边界，DevTools 里看到 flex-wrap: wrap 没被划掉，但就是不换行。根本原因不在 flex 本身，而在盒模型的隐式约束：
-
min-width: auto（弹性项默认值）会锁死最小宽度为内容固有宽，哪怕内容是一整段无空格 URL，也拒绝收缩让位 -
white-space: nowrap被某些 UI 库（如 Element UI 的.el-tag）或重置样式全局注入，直接禁用所有换行机会 - 父容器没设
width或max-width，flex 主轴无限延展，浏览器判断“永远有空间”，自然不触发 wrap
必须显式覆盖的三个盒模型关键点
只加 flex-wrap: wrap 不够，得同步松动弹性项的刚性约束：
- 给每个标签加
min-width: 0：解除min-width: auto对收缩的封锁，让overflow-wrap: break-word有机会生效 - 检查并重置
white-space：若标签内含长英文或路径，确保没继承white-space: nowrap；必要时强制写white-space: normal - 父容器必须带明确宽度：哪怕只是
width: 100%，不能靠内容撑开；响应式场景下优先用max-width配合width: 100%
flex-flow: row wrap 顺序写错也会失效
CSS 不接受语义推断：flex-flow: wrap row 是非法值，浏览器直接忽略整条声明，回退到默认 flex-wrap: nowrap。这不是兼容性问题，是语法错误。
- 合法写法只有
flex-flow: row wrap、flex-flow: column wrap等，方向在前、换行在后 - 在 DevTools 的 Styles 面板里，如果该属性被划掉（strikethrough），第一反应就该查顺序
- 别省略
flex-flow——只写display: flex+flex-wrap: wrap在部分旧版 Safari 中仍可能降级失败
移动端窄屏下标签仍挤在一起？盒模型要配合文本断行
小屏幕宽度骤减，但标签文字长度不可控，单靠 flex 换行不够，得叠加文本级控制：
- 对标签内文字加
overflow-wrap: break-word（标准） +word-wrap: break-word（IE 兼容） - 避免用
word-break: break-all：它对中文也逐字打断，阅读体验差；break-word会先尝试按词断，不行再断字，更安全 - 在
@media (max-width: 480px)中缩小padding和font-size，同时把margin-right改为margin-inline-end，兼顾 RTL 布局
真正卡住换行的，从来不是 flex-wrap 开关本身，而是 min-width、white-space 和父容器尺寸这三个盒模型锚点没松开。调的时候别只盯着 flex 属性，先打开 DevTools 检查 computed 样式里的 min-width 实际值和 white-space 来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
