flex-wrap: wrap 是触发换行的唯一开关；未设置时即使容器窄、子项宽也不换行，因默认为 nowrap；需同时设 display: flex 和 flex-wrap: wrap 才生效。
flex-wrap: wrap 是换行的唯一开关
不设 flex-wrap，哪怕容器再窄、子项再宽，flex 项目也死扛着不换行——这是默认值 nowrap 的行为，不是 bug，是设计。必须显式写 flex-wrap: wrap（或 wrap-reverse），换行逻辑才启动。
常见错误是只调 flex-direction 或狂改 flex-basis，结果发现怎么缩容器都没用。别绕弯，先检查这一行有没有：
display: flex; flex-wrap: wrap;
子项不收缩导致换行失效的典型场景
即使开了 flex-wrap: wrap，如果某个子项设置了 flex-shrink: 0 或固定宽度（比如 width: 300px）且内容撑满，它就可能卡住整行，让后续项目被迫溢出容器右边缘，而不是换到下一行。
- 检查是否有子项写了
flex: none、flex-shrink: 0或min-width: max-content - 文字类内容建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防止无限制撑宽 - 图片记得设
max-width: 100%，否则会突破父容器约束
flex-basis 和 width 对换行位置的影响
flex-basis 决定项目在换行前“占多大空间”，它比 width 更优先参与主轴尺寸计算。如果设了 flex-basis: 200px，那这个项目就会尽量占 200px 宽，哪怕容器只剩 150px，它也不缩，直接触发换行（前提是其他项目能腾出空间）。
容易踩的坑：
-
flex-basis: auto会读取width，但flex-basis: 0就彻底忽略width，从零开始分配剩余空间 - 用百分比时注意：若父容器宽度未定义（比如
height: 100vh但没设width），flex-basis: 50%可能计算为 0 - 换行点不是像素级精确的——浏览器按行内项目总
flex-basis累加后判断是否超限，所以微小误差常见
移动端适配中 wrap 换行突然错乱的原因
在 iOS Safari 或某些安卓 WebView 中，flex-wrap: wrap 有时表现异常：项目明明该换行却挤成一坨，或者换行后间隙诡异。这往往和以下因素有关：
- 容器或子项存在
zoom、transform: scale()，会干扰 flex 布局的尺寸判定 - 父容器用了
min-width: fit-content或display: inline-flex，导致宽度计算脱离上下文 - 子项含
input、textarea等表单控件，它们有默认min-width，且各浏览器差异大 - 解决办法通常是加一层包裹并设
width: 100%，或对可疑子项强制flex-shrink: 1
换行本身简单，但 flex 项目的尺寸来源太杂——flex-basis、width、min/max-width、内容自然宽、甚至字体渲染都会参与博弈。真要稳定换行，得一个一个掐掉不可控变量，而不是只盯 flex-wrap 这一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
