必须显式设置flex-wrap: wrap，因默认值为nowrap，不写就不会换行；还需父容器有display: flex、明确宽度限制、子项可收缩（如min-width: 0），否则即使写了也不生效。
必须显式设置 flex-wrap: wrap，且子项不能用 flex: 1 —— 否则断点切换时要么不折行，要么折行后错位、撑满整行、失去响应性。
为什么加了 display: flex 还是不折行？
因为 flex-wrap 默认是 nowrap，它根本不会触发换行逻辑。哪怕你把窗口缩到 320px，只要没写 flex-wrap: wrap，浏览器就只会压缩或溢出子项，绝不会“自动折”。常见误判是以为 display: flex 自带换行能力，其实它只管单行流式排列。
实操建议：
- 父容器必须同时声明：
display: flex+flex-wrap: wrap - 别依赖 DevTools 的“样式”面板里看到的
flex-wrap值——要查“Computed”标签页，确认它真被计算生效（尤其当有 CSS-in-JS 或重置规则干扰时） - 在媒体查询中切换断点时，
flex-wrap必须显式重写，不能靠继承；例如从wrap-reverse切回wrap，漏掉这句就会卡在反向换行状态
flex: 1 是响应式折行的最大陷阱
flex: 1 的本质是“强制占满剩余空间”，它会锁死子项尺寸锚点，让 Flex 引擎永远判断“还能塞下”，从而拒绝换行。哪怕你设了 max-width: 200px，只要用了 flex: 1，折行大概率失效。
更健壮的写法：
- 用
flex: 0 0 calc(33.333% - 12px)替代flex: 1，其中12px是左右gap或margin总和 - 配合
gap: 12px（现代浏览器）或退化为margin（IE11 兼容需额外处理） - 若需最小宽度兜底，改用
min-width: 200px+flex: 0 0 1fr，但注意：纯 Flex 不支持minmax()，1fr在多行下行为不稳定，慎用
断点切换时如何避免布局跳变？
视觉跳变通常不是动画问题，而是换行触发时机与尺寸计算不同步导致的。比如桌面端 4 列 → 移动端 1 列，若只改 flex-direction 或列宽，可能因子项高度差异造成行高塌陷或错位。
关键控制点：
- 多行时对齐用
align-content，不是align-items：align-content: flex-start防止最后一行悬浮居中；align-content: stretch（默认）适合卡片等高场景 - 给父容器设明确
width或max-width，否则 Flex 容器可能按内容无限延展，折行条件无法触发 - 避免在断点中仅调整
order值而不同步更新flex-basis：比如移动端想把侧边栏提到顶部，只改order但子项仍保持flex: 0 0 70%，会导致主内容区被严重挤压
IE11 和 gap 兼容性最容易在上线前翻车
真实项目中，这两个点常被忽略，直到测试人员用 IE11 打开页面才发现布局全乱：子项堆成一列不换行、间距消失、甚至垂直方向错位。
兼容方案：
- IE11 不支持
gap，必须用margin模拟，但要注意清除最后一行的多余margin-right：.item:nth-child(4n) { margin-right: 0; }（假设每行 4 个） - IE11 对
flex-wrap: wrap支持不稳定，尤其当子项用了flex: 1时；稳妥做法是彻底弃用flex: 1，改用-ms-flex: 0 0 calc(25% - 12px)+ 手动margin - 别信“autoprefixer 能解决一切”——它不处理
gap回退，也不修复flex: 1在 IE 中的换行失效
真正优雅的平滑折行，不靠过渡动画，而靠尺寸锚点清晰、换行开关明确、断点逻辑自洽。最常被忽略的是：你以为在调 flex-direction，其实该检查的是 flex-wrap 是否真的生效，以及子项有没有偷偷锁死自己的宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
