flex-grow按比例分配剩余空间而非容器总宽，最终宽度=原始宽度+分得的剩余空间；flex-shrink按加权压缩率处理溢出，二者均依赖flex-basis基准，常见失效源于无剩余/溢出空间或min-width干扰。
flex-grow 不是“按比例设宽度”，而是分剩余空间
设 flex-grow: 2 并不等于“占容器 2/3 宽度”，它只表示：当父容器有剩余空间时，该子项拿走的**额外空间**是 flex-grow: 1 项的两倍。最终宽度 = 原始宽度（flex-basis 或内容宽） + 分得的剩余空间。
常见错误现象：三个子项分别设 flex-grow: 1、2、1，结果宽度不是 1:2:1 —— 因为它们默认 flex-basis: auto，原始文字宽度不同（比如一个写“首页”，一个写“关于我们关于我们关于我们”），导致起点就不一致。
- 想让比例真正生效，必须统一
flex-basis，最常用的是flex-basis: 0（注意：无单位，不是0px或0%；但0%在旧版 IE 中更稳） -
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，不是0px—— 写错单位会导致部分浏览器忽略该声明 - 调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Flexbox overlay”，能直观看到各子项的基线、剩余空间分配线
为什么 flex-grow: 1 的两个子项不等宽
因为 flex-grow: 1 表示“平分剩余空间”，不是“均分容器”。剩余空间 = 容器总宽 − 所有子项原始宽度之和。只要原始宽度不同，最终宽度就不同。
举例：容器宽 600px，子项 A 含短文本（原始宽约 80px），B 含长文本（原始宽约 240px），都设 flex-grow: 1 → 剩余空间 = 600 − (80 + 240) = 280px → 各分 140px → A 最终宽 220px，B 最终宽 380px，比例接近 1:1.7，远非 1:1。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：显式写
flex-basis: 0，抹掉内容影响，再配flex-grow - 推荐写法：
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0），避免意外压缩 - 若子项含图片或内联元素，额外加
min-width: 0，防止浏览器按固有尺寸撑开
响应式中改 flex-grow 要避开的坑
用媒体查询动态调整 flex-grow 值（如桌面端 .sidebar { flex-grow: 1 }，移动端设为 0）本身可行，但容易因未同步重置其他属性而失效。
- 设
flex-grow: 0后，若没配flex-shrink: 0或width，子项仍可能被压缩（尤其含图片或长文本时） - 移动端切为单列时，别只改
flex-grow，应配合flex-direction: column和width: auto，否则仍受主轴约束 - IE10/11 对
flex: 2 0 0%支持不稳定，降级写法应拆开：flex-grow: 2; flex-shrink: 0; flex-basis: 0% - 避免在同一样式块里混用
width和flex，flex-basis优先级高于width，易造成预期外覆盖
flex-grow 遇到 min-width / max-width 怎么算
flex-grow 的分配发生在 min-width 和 max-width 校验之后。浏览器先确保每个子项满足尺寸边界，再把“合法剩余空间”按权重分。
举例：子项设 min-width: 300px 且 flex-grow: 2，但它按权重本该只分到 250px → 实际仍占 300px，多占的 50px 从其他子项可分空间里扣除；反之，设 max-width: 100px 且 flex-grow: 5，即使该分 300px，也卡死在 100px，溢出部分重新分配。
- 调试时重点检查 computed styles 中的
min-width是否被继承或重置（比如img默认有固有最小宽） - 对替换元素（
img、iframe），务必加min-width: 0，否则flex-grow可能完全不触发 - 不要依赖
flex-grow强制突破max-width—— 它不会绕过这个限制，这是设计使然
flex-basis 的隐式值和替换元素的最小尺寸行为。哪怕所有 flex-grow 都设对了，只要漏掉一行 min-width: 0 或写错 flex-basis: 0px，比例就会在某个浏览器或某种内容下突然崩掉。 
