flex-wrap: wrap不生效主因是父容器宽度被锁死或子项收缩受阻；需设min-width: 0、white-space: normal、flex-shrink: 1，并配box-sizing: border-box与明确flex-basis。
Flex-wrap 折行不是加了就生效，关键在父容器和子项的宽度约束是否闭环。
flex-wrap: wrap 为什么写了也不折行
最常见原因是父容器被其他布局上下文（比如 Grid、绝对定位容器、或外层 flex）锁死了最小计算宽度，导致子项无法“感知”到空间不足。浏览器不会因为写了 flex-wrap: wrap 就自动放弃收缩子项——它仍会先尝试把所有子项按 flex-basis 撑满一行，撑不开才换行。
- 父容器缺
min-width: 0：尤其嵌套在display: grid或position: absolute容器中时，flex 子项的基准宽度计算会异常 - 子项设了
white-space: nowrap：按钮、带图标的文字项常被 UI 库默认加上，强行阻止自身收缩 - 子项用了
flex: 1或flex-grow: 1：它会优先拉伸占满剩余空间，而不是让出位置给折行 - 父容器 width 是固定像素值（如
width: 600px），但没配min-width: 0，Flex 引擎无法触发 shrink 行为
子项 flex 值怎么设才稳
别依赖默认值，显式声明能避开很多框架重置带来的坑。重点不是“让它能伸”，而是“让它肯缩”。flex: 0 1 auto 看似合理，但 auto 会读取内容宽度，容易在小屏下撑爆；更可控的是用固定基础宽度。
- 推荐写法：
flex: 0 1 120px（grow: 0,shrink: 1,basis: 120px） - 120px 是 iPhone SE 屏宽 / 3 的安全起点，兼顾图标+文字按钮的可点区域
- 避免用
flex-basis: fit-content：Safari 旧版不支持，且在某些嵌套场景下计算不稳定 - 如果子项含图片，确保其父容器设了
min-width: 0，否则图片固有尺寸会卡死 flex 基准
box-sizing 和 padding 怎么影响折行
没加 box-sizing: border-box 是列表项折行错位的隐形元凶。当子项设了 padding: 8px 和 flex-basis: 120px，实际占用宽度是 120px + 16px，多出来的像素会在小屏下累积，导致“明明算得刚好却还是溢出”。
立即学习“前端免费学习笔记（深入）”；
- 所有子项必须加
box-sizing: border-box - 用
gap替代margin控制间距：避免外边距合并、父子 margin 传递等问题 - 如果兼容 IE11，改用
grid-column-gap和grid-row-gap，但不要为它放弃现代 Flex 写法 - 检查是否全局重置了
box-sizing（比如 Normalize.css 或某些 CSS 框架），子项样式可能被覆盖
编辑器内嵌工具栏的特殊陷阱
在 Monaco、CodeMirror 等编辑器里放响应式工具栏，经常出现“缩放后才折行”或“永远不折行”。这不是 CSS 写错了，而是编辑器容器用了 transform 或 contain: paint，干扰了 Flex 宽度推导链路。
- 确保工具栏父容器有明确的
width（哪怕width: 100%），不能是transform的直接子元素 - 若必须用
transform，在父容器加contain: layout强制隔离渲染上下文 - 禁用编辑器主题里可能存在的全局
white-space: nowrap重置 - DevTools 里看子项的 computed
flex-basis值，比猜快十倍——它要是显示auto或远大于你写的值，问题就在这儿
真正难调的不是“怎么让折行发生”，而是当产品要求“左侧按钮固定 88px、中间搜索框最小 240px、右侧用户头像最多占 64px”时，你得一眼看出该动 flex-basis 还是加 min-width，然后立刻验证 computed styles 是否如预期更新。
