flex-grow决定剩余空间分配比例，flex-shrink按加权压缩率处理溢出，二者均依赖flex-basis基准；常见失效源于无剩余/溢出空间或min-width干扰，推荐用flex简写协同控制三者。
flex-grow 是“抢多余空间”的比例系数
当所有子项原始宽度加起来小于容器时，flex-grow 就开始工作：它决定谁多分、谁少分那块“空出来的区域”。关键不是绝对值，而是相对比例——比如 flex-grow: 2 的元素会拿到 flex-grow: 1 元素两倍的额外空间。
- 默认值是
0，意味着“不参与分配”，哪怕有 1000px 剩余也纹丝不动 - 计算逻辑是：
单个元素获得空间 = (自身 flex-grow / 所有兄弟 flex-grow 总和) × 剩余空间 - 常见误用：给多个项目都设
flex-grow: 1，以为能均分容器宽度——其实它们只均分“剩余空间”，原始尺寸（由flex-basis或内容撑开）仍保留
.container { display: flex; width: 600px; }
.item-a { flex-basis: 120px; flex-grow: 1; }
.item-b { flex-basis: 80px; flex-grow: 3; }
/* 剩余空间 = 600 - (120 + 80) = 400px */
/* item-a 得到 1/(1+3)×400 = 100px → 最终宽 220px */
/* item-b 得到 3/(1+3)×400 = 300px → 最终宽 380px */flex-shrink 是“让出溢出空间”的加权压缩率
当子项原始总宽超过容器时，flex-shrink 触发收缩。但它不是简单按比例砍掉像素，而是按 flex-shrink × flex-basis 加权计算“该让多少”——基础尺寸越大、flex-shrink 越高，被压缩得越狠。
- 默认值是
1，所有项目默认可缩；设为0就是“宁可溢出也不缩”，适合图标、按钮等不可裁剪内容 - 数值本身无单位，但效果受
flex-basis显著影响：一个flex-basis: 300px; flex-shrink: 1的项，比flex-basis: 100px; flex-shrink: 3的项实际收缩更多 - 容易踩坑：只调
flex-shrink却忽略flex-basis，导致压缩结果完全偏离预期
.container { display: flex; width: 500px; }
.item-x { flex-basis: 200px; flex-shrink: 0; } /* 死守 200px，不缩 */
.item-y { flex-basis: 200px; flex-shrink: 2; } /* 压缩力度是默认项的 2 倍 */
.item-z { flex-basis: 200px; flex-shrink: 1; } /* 默认缩 */
/* 总原始宽 600px，超容 100px → 溢出空间由 y 和 z 分担，x 不动 */grow 和 shrink 经常一起失效的真相
很多人发现设了 flex-grow 却没扩展，或设了 flex-shrink: 0 还是被压扁——问题往往不在这两个属性本身，而在它们的“前提条件”没满足。
-
flex-grow不生效？检查父容器是否真有剩余空间：子项可能因min-width、内容换行、white-space: nowrap等撑满容器，导致“看似有空实则无空” -
flex-shrink: 0失效？确认子项没有设置min-width——浏览器会优先保证min-width，此时即使flex-shrink: 0，也可能因强制最小宽而触发其他收缩逻辑 - 最隐蔽的干扰项：
flex-basis。它默认是auto（即内容宽度），但一旦设成具体值（如flex-basis: 100px），就成为 grow/shrink 的计算基准，和视觉宽度脱钩
什么时候该用简写 flex 而不是分开写
单独控制 flex-grow 或 flex-shrink 很常见，但真正稳定的布局往往需要三者协同：flex-grow、flex-shrink、flex-basis。这时候直接用 flex 简写反而更安全，避免遗漏默认值干扰。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0：可扩可缩，基准为 0（内容决定起点） -
flex: 0 0 auto（即flex: none）是最强“固定尺寸”声明：不扩、不缩、基准为内容宽 -
flex: auto等价于flex: 1 1 auto：可扩可缩，基准为内容宽——适合卡片列表中希望内容撑开但又能弹性适应的场景
记住：flex 简写会重置所有三个值，所以不要混用简写和分写，否则容易覆盖掉你没意识到的默认行为。
