flex-wrap: wrap 是实现Flex子项自动换行的必要属性；默认nowrap禁用换行，必须显式设置wrap，且需父容器有明确宽度约束、子项允许收缩（如min-width: 0），否则换行逻辑不触发。
flex-wrap: wrap 没写，换行逻辑就根本不存在
Flex 容器默认 flex-wrap 是 nowrap，不是 wrap。只写 display: flex，等于明确禁用换行——哪怕子元素加起来宽过容器，浏览器也只会压缩、溢出或拉出横向滚动条，绝不会折行。
- 常见错误是复制代码时漏掉这一行：
flex-wrap: wrap或等效的flex-flow: row wrap - 别用
flex-flow: row代替，它不包含wrap，flex-wrap仍为默认nowrap - Vue/React 中动态 class 名写成
flexWrap（驼峰）无效，CSS 属性必须是短横线格式：flex-wrap - 用开发者工具看 computed styles，确认
flex-wrap的真实值不是被 reset.css 或第三方样式覆盖成nowrap
写了 flex-wrap: wrap 却还不换行？盯紧子元素能不能缩
换行不是“行满了就断”，而是“放不下 + 子项允许收缩”共同触发。只要有一个子项拒绝缩小，整行就卡住，后续子项可能直接溢出右边缘，而不是换到下一行。
立即学习“前端免费学习笔记（深入）”；
- 检查子项是否设了
flex-shrink: 0、min-width: max-content或固定大宽度（如width: 300px） - 图片没加
max-width: 100%，原始尺寸撑满整行，换行点就被锁死 - 文本含长 URL 或 token，但父级没设
min-width: 0，Flex 默认min-width: auto会阻止收缩，overflow-wrap根本没机会生效 - 子项用了
white-space: nowrap，内部文字不折，间接导致自身宽度膨胀，换行条件无法满足
父容器没“边界”，flex-wrap: wrap 就是摆设
flex-wrap: wrap 不是强制断行，它只在“空间不足”时响应。如果父容器宽度无限（比如 <body> 直接子元素、没设 width/max-width），浏览器永远算不出“放不下”，自然不换行。
- 父容器必须有明确宽度约束：如
width: 300px、max-width: 100%，或嵌套在有宽度限制的祖先中 - 注意
padding和border会挤占可用空间，建议统一加box-sizing: border-box - 避免父容器是
<form>、<table>等原生 display 行为特殊的元素，它们可能隐式覆盖display: flex - float、position: absolute、display: contents 都可能破坏 Flex 上下文，让
flex-wrap失效
真正卡住的地方往往不是属性写没写，而是子元素的 min-width: auto 和父容器缺失宽度约束这两点同时存在——它们一前一后把换行逻辑彻底堵死，连开发者工具里看到 flex-wrap: wrap 生效了也没用。
