flex-wrap: wrap 是启用多行布局的必要开关，默认 nowrap 会强制单行；换行效果取决于子项 min-width、gap 计算、文本断行等协同控制，而非仅靠该属性。
flex-wrap: wrap 是切换单行/多行的开关，不是可选项
加了 display: flex 但不换行，90% 的原因是漏写了 flex-wrap: wrap。它的默认值是 nowrap，相当于锁死单行——哪怕容器只剩 1px 宽，子项也会被压缩或溢出，绝不会主动折行。
要实现「空间够就单行均分，不够就自动换行」，必须显式写：flex-wrap: wrap。别指望框架或 reset.css 帮你设好，务必在开发者工具里检查该属性是否被覆盖（比如 Bootstrap 的 .d-flex 类不带 wrap）。
- 想强制单行？用
flex-wrap: nowrap（显式写比依赖默认更可靠） - 想换行且首行贴底？用
flex-wrap: wrap-reverse，但日常极少需要 - 别混用
flex-flow: row wrap和单独写flex-wrap，语义一致，选一种保持统一即可
子项宽度设置决定换行触发点
换不换行，不只看容器宽，更取决于子项能否“挤得下”。flex: 1 本身不控制换行，它只负责单行内均分剩余空间；真正影响换行时机的是子项的最小可缩尺寸。
常见错误：只写 flex: 1 却没设 min-width，结果长文本或图片把整个子项撑开，导致换行失效。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐组合：
flex: 1 1 280px+min-width: 0—— 基础宽度 280px，可伸缩，且允许收缩到 0（防文字撑破） - 严格列数场景（如两栏卡片）：
flex: 0 0 calc(50% - 0.5rem)，其中0.5rem是gap: 1rem的一半，确保计算精准 - 避免混用不同
flex值：同一容器内有的写flex: 1，有的写flex: 0 0 200px，会导致换行错乱、对不齐
justify-content 在多行下会“失灵”
justify-content: space-between 看起来很美，但换行后最后一行只剩 1–2 个子项时，它会把它们拉到左右两端，中间大片空白——这不是 bug，是它的设计逻辑：每行独立计算间距。
如果你要视觉稳定，别硬扛这个副作用。
- 左对齐最安全：
justify-content: flex-start，所有行都靠左，间距均匀 - 真要两端对齐：
justify-content: space-evenly，它对单行/多行一视同仁，间距真正平均 - 禁用
margin-left: auto或float：Flex 容器里这些无效，还可能干扰换行判断
移动端文字撑破卡片是高频陷阱
flex-wrap 管的是子元素级换行，不是子元素内部的文字换行。一个无空格的超长 URL 或连续英文，会把整个卡片撑宽，导致本该换行的子项卡在第一行不动。
这不是 Flex 的问题，是内容层没处理好。
- 给卡片加
word-break: break-word或overflow-wrap: break-word - 给卡片本身加
min-width: 0，解除 Flex 项目默认的min-width: auto保护 - 检查是否误设了
white-space: nowrap—— 这个声明会直接封死所有内部换行 - IE11 不支持
gap和部分calc()，要用margin模拟间距，子项用flex: 0 0 50%这类确定值
实际换行效果好不好，从来不只是 flex-wrap: wrap 这一行的事。它像开关，但真正决定“什么时候切”“切得齐不齐”“切完还稳不稳”的，是 min-width、gap 计算、文本断行控制，还有你有没有在最后一行被 space-between 背刺过。
