flex-wrap: wrap 有效需父元素设 display: flex；子元素需合理设置 width、min-width: 0、flex-shrink: 1 及 word-break 才能正常换行，IE11 存在 flex-basis 解析异常。
flex-wrap: wrap 能让子元素自动换行，但前提是父容器设了 display: flex
很多开发者试了 flex-wrap: wrap 没效果，根本原因是忘了给父元素加 display: flex。Flex 布局所有属性（包括 flex-wrap）只在 Flex 容器上生效。
常见错误现象：flex-wrap: wrap 写了，子元素还是强行挤在一行、溢出或被压缩变形。
- 确认父元素有
display: flex或display: inline-flex -
flex-wrap默认值是nowrap，必须显式设为wrap或wrap-reverse - 如果子元素设置了固定宽度（如
width: 200px）且总和超过容器，换行才触发；否则可能“看起来没换行”——其实是空间还够
子元素不换行？检查是否用了 flex-shrink 或 min-width 干扰布局
即使启用了 flex-wrap: wrap，某些子元素仍可能拒绝换行，典型原因是：
-
flex-shrink: 0阻止压缩，又没设min-width，导致它宁可溢出也不让出空间 -
min-width: fit-content或min-width: max-content可能撑满整行，变相禁用换行 - 子元素内有长单词或 URL，未设置
word-break: break-word或overflow-wrap: break-word，造成单个子项过宽
实操建议：对子元素加 flex-shrink: 1 和 min-width: 0，这是安全兜底组合，允许它在必要时收缩并参与换行计算。
立即学习“前端免费学习笔记（深入）”；
flex-wrap: wrap 在不同浏览器中的兼容性与 fallback 方案
flex-wrap 在现代浏览器中支持良好（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+），但 IE10/11 仅部分支持，且存在 bug：比如 IE11 中 flex-wrap: wrap 对 flex-basis 的解析异常，可能导致换行错位。
- 如需兼容 IE11，避免依赖
flex-basis控制换行点，改用width+flex-shrink - 不推荐用
display: -ms-flexbox伪方案，维护成本高且行为不一致 - 真正老旧环境（IE9 及以下）只能退回到
float或inline-block+white-space: normal，但无法精确控制换行逻辑
.container {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐用 gap 替代 margin，更可控 */
}
<p>.item {
flex: 1 1 200px; /<em> flex-grow: 1, flex-shrink: 1, flex-basis: 200px </em>/
min-width: 0; /<em> 关键：允许 flex-shrink 生效 </em>/
word-break: break-word;
}换行逻辑本身不复杂，但实际卡住的地方往往不是 flex-wrap 本身，而是子元素的尺寸约束、文本断行、或浏览器对 flex-basis 和 min-width 的混合解析。尤其在动态内容场景下，一个没设 min-width: 0 的 flex 子项就可能让整行拒绝换行。
