单独设flex-grow易失效，因其默认flex-basis:auto导致原始宽度不一致，剩余空间分配比例失真；flex:N等价于flex:N 1 0%，以0%抹除内容宽度干扰，确保同一起跑线。
直接用 flex 简写，别单独设 flex-grow —— 否则比例大概率失效。
为什么单独设 flex-grow 容易翻车
单独写 flex-grow: 2 时，flex-basis 默认是 auto，也就是按内容宽度当起点。一个子项写“首页”，另一个写“用户中心管理后台设置”，原始宽度差一倍，再怎么分剩余空间也拉不回比例。
- 浏览器先按文字撑开原始尺寸，再算“剩余空间 = 容器宽 − 所有原始宽之和”
-
flex-grow只管分这个“剩余”，不管原始宽是否一致 - 没设
flex-shrink时，它默认为1，但若内容超限，收缩逻辑又会干扰比例
flex: 1、flex: 2 这些简写到底干了什么
flex: N 不是“占 N 份”，而是等价于 flex: N 1 0% —— 即 flex-grow: N、flex-shrink: 1、flex-basis: 0%。关键在 0%：它抹掉了内容宽度影响，让所有子项从“零起点”开始按权重拉伸。
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0% -
flex: 2→flex-grow: 2; flex-shrink: 1; flex-basis: 0% - 想锁死最小宽度？改用
flex: 2 1 120px，其中120px是基准，不是上限
常见比例场景的写法与坑点
要实现左:中:右 = 1:2:1，别只写 flex-grow，直接上简写：
立即学习“前端免费学习笔记（深入）”；
`.container { display: flex; }
.item-left { flex: 1; }
.item-center { flex: 2; }
.item-right { flex: 1; }`
- 如果某子项含图片或输入框，加
min-width: 0防止其内部固有尺寸撑爆比例 - 移动端小屏下想强制单列？用媒体查询覆盖：
@media (max-width: 768px) { .item { flex: 1 1 100%; } } - 别写
flex-basis: 0px或0em—— 规范要求无单位的0或0%，否则部分浏览器（尤其旧版 Safari）会忽略整条声明
真正决定比例的不是数字本身，而是所有子项是否站在同一起跑线（flex-basis 一致）；而 flex 简写是唯一能同时锁死三要素的方式。漏掉任何一个，都可能让 1:2 看起来像 1:1.3。
