flex-wrap: wrap 未生效的主因是父容器缺失 display: flex，或子项设了 flex-shrink: 0 且总宽未超容器；另需排查 white-space、长单词、viewport 缺失及 flex-basis 解析偏差等问题。
flex-wrap: wrap 为什么没生效？
常见原因是父容器没设 display: flex，或者子项设置了 flex-shrink: 0 且总宽度未超容器——此时即使写了 flex-wrap: wrap 也不会换行。另外，若子项用了 white-space: nowrap 或包含长单词/URL，也可能撑开容器导致“看似不换行”。
实操建议：
- 确认父容器有
display: flex和flex-wrap: wrap - 检查子项是否意外设置了
min-width或flex-basis过大 - 对文本内容加
word-break: break-word或overflow-wrap: break-word防止单词溢出
固定子项宽度时如何让换行更可控？
直接写 width: 200px 容易在小屏下溢出或换行错乱，因为 flex-basis 默认优先于 width，而 flex-shrink 可能压缩它。更稳妥的方式是用 flex 简写控制三值（flex-grow、flex-shrink、flex-basis）。
例如要固定 200px 宽、不缩放、不拉伸：
立即学习“前端免费学习笔记（深入）”；
flex: 0 0 200px;
这比单纯写 width: 200px 更可靠，尤其在响应式场景下。如果希望在小屏中自动收缩为 100%，可改用：
flex: 0 1 200px;
此时 flex-shrink: 1 允许压缩，但不会拉伸（flex-grow: 0）。
换行后首行对齐与间隙不一致怎么办？
默认 justify-content: flex-start 会让每行左对齐，但最后一行可能只有 1–2 个子项，显得松散。用 justify-content: space-between 或 space-around 会因行内项目数不同导致间距突变。
更稳的解法是结合 gap 和 justify-content: flex-start，并用伪元素补足最后一行空隙（适用于已知列数）；或改用 display: grid（当列数固定时更直观）。但若坚持用 Flex，则注意：
-
gap属性兼容性较好（Chrome 84+、Firefox 63+、Safari 14.1+），可替代margin控制间隔 - 避免在子项上同时设
margin和gap，否则间距加倍 - 若需首行居中、后续左对齐，CSS 目前无原生支持，得靠 JS 计算或额外 wrapper
移动端适配中 flex-wrap 换行失效的典型陷阱
最常被忽略的是 viewport 设置缺失，导致浏览器以桌面宽度渲染，flex 容器实际可用宽度远大于预期。另一个隐形问题是 iOS Safari 对 flex-basis: auto 的解析偏差——某些版本下它会无视内容尺寸，强行按 0 处理。
建议操作：
- 页面
<head>中必须有：<meta name="viewport" content="width=device-width, initial-scale=1">
- 避免依赖
flex-basis: auto做宽度判断，显式写flex-basis: 0+flex-grow: 1更可控 - 在 iPhone 上测试时，打开 Safari 开发者工具，勾选 “Disable Cache” 并强制刷新，部分 flex 行为会因缓存表现异常
flex-wrap 的行为本身很稳定，真正出问题的往往不是它，而是宽度计算链上的某一个环节被隐式覆盖了——比如某个祖先元素的 max-width、padding 或 box-sizing 没设对。
