flex-grow决定剩余空间分配比例，flex-shrink按加权压缩率处理溢出，二者均依赖flex-basis基准；常见失效源于无剩余/溢出空间或min-width干扰，推荐用flex简写协同控制三者。
当所有子项原始宽度加起来小于容器时，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-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 不动 */很多人发现设了 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 简写会重置所有三个值，所以不要混用简写和分写，否则容易覆盖掉你没意识到的默认行为。