根本原因是flex-wrap未生效或子项拒绝收缩；必须显式设置flex-wrap: wrap并确保子项可缩（如min-width: 0）、父容器有明确宽度、无white-space: nowrap等锁死行为。
根本原因就一个：flex-wrap 没生效，或者即使写了也卡在子项收缩环节。不是浏览器“忘了换行”，而是换行条件从没被满足。
flex-wrap: wrap 没写，或被覆盖成 nowrap
Flex 容器默认就是 flex-wrap: nowrap，只写 display: flex 等于主动禁用换行。常见失效场景：
- 复制代码时漏掉
flex-wrap: wrap或等效的flex-flow: row wrap - 第三方 UI 库（如 Ant Design 的
.ant-row）或 CSS 重置规则把flex-wrap强制设回nowrap - Vue/React 中动态 class 写成
flexWrap（驼峰），但 CSS 属性必须是flex-wrap（短横线） - 用开发者工具看「Computed」面板里
flex-wrap的真实值，别信源码里写了什么
写了 flex-wrap: wrap 却还不换行？子项在“硬扛”
flex-wrap: wrap 不是“强制断行”，而是“放不下 + 子项愿意缩”才触发。只要有一个子项拒绝变窄，整行就卡住：
-
flex-shrink: 0或flex: 0 0 auto—— 直接锁死不缩 -
min-width: max-content或未显式设min-width: 0—— Flex 默认min-width: auto，长文本、URL、图片会撑爆宽度 -
white-space: nowrap在子项内 —— 文本不折，间接导致子项总宽虚高 - 图片没加
max-width: 100%—— 原始尺寸压倒 Flex 计算
父容器没“边界”，flex-wrap 就是摆设
换行只在“空间不足”时响应。如果父容器宽度无限（比如直接挂在 下、没设 width 或 max-width），浏览器永远算不出“放不下”：
- 必须给父容器设明确宽度约束：
width: 600px、max-width: 100%，或嵌套在有宽度限制的祖先中 -
padding和border会挤占可用空间，建议统一加box-sizing: border-box - 避免父容器是
<form></form>、<table> 等 display 行为特殊的原生元素 <li> <code>float、position: absolute、display: contents都可能破坏 Flex 上下文，让flex-wrap失效 - 横向滚动卡顿？iOS Safari 必须加
-webkit-overflow-scrolling: touch，且不能和transform同用 - 想截断加省略号？得在子项内部套一层块级元素，配
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+ 固定宽度 - 最后一行左偏？
justify-content: center只居中所有子项整体，不是每行居中；多行对齐要用align-content: center，但单行下无效
移动端滚动卡顿、省略号不出现、最后一行不对齐……都是连锁反应
这些不是独立 bug，而是前面任一环节没处理干净的副作用：
最易被跳过的点是：flex-wrap: nowrap 只管子项排列，不管子项内部是否溢出；而子项是否收缩、是否截断、是否滚动，全由它自己的盒模型和文本属性决定——不是加个 display: flex 就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
