flex-grow设为0、1、2时左中右剩余空间分配比例为0:1:2；它不决定绝对宽度，只按此比例分配父容器减去子项初始尺寸后的剩余空间。
flex-grow 设为 0、1、2 时左中右比例到底是多少？
不是 0:1:2，而是“剩余空间”的分配比例。flex-grow 不控制绝对宽度，只决定容器里**剩余空间**怎么切——前提是所有子项的初始尺寸（比如 width 或内容宽度）已定。
常见错误现象：flex-grow: 1 的项看起来比 flex-grow: 2 还宽，其实是它内容多、自身更宽，挤占了别人的空间；或者三栏都设了 width，flex-grow 根本没机会生效。
- 先确保父容器设了
display: flex，且子项没写死flex-basis或冲突的width - 如果子项有文字内容，加
min-width: 0防止文本撑开破坏比例（尤其在小屏或缩放时） - 想严格按 1:2:3 分配剩余空间？直接写
flex-grow: 1、flex-grow: 2、flex-grow: 3，别碰flex-basis
为什么 left 设置 flex-grow: 0 却还是被拉宽了？
因为 flex-grow: 0 只管“不参与剩余空间分配”，不管“自身内容宽度”。如果左侧是长文本或图片，默认会尽可能伸展，Flex 不会自动压缩它。
使用场景：导航栏左 logo、中标题、右操作按钮，要求 logo 固宽、标题占满剩余大部分、按钮固定宽或自适应。
立即学习“前端免费学习笔记（深入）”；
- 给左侧项加
flex-shrink: 0+flex-basis: auto（或明确写flex-basis: 80px） - 同时加
min-width: 0和overflow: hidden+text-overflow: ellipsis应对超长文本 - 避免给左侧写
width: 20%—— 它会和flex-grow冲突，浏览器可能忽略其中一个
Chrome 和 Safari 对 flex-grow 计算结果不一致？
不是计算逻辑不同，而是默认 flex-basis 值在旧版 Safari（≤15.4）里有时被解析为 auto，有时是 0%，导致剩余空间基数不同。
性能影响：无显著差异；兼容性影响：Safari iOS 14–15.4 在 flex-direction: row 下对 flex-grow 的初始空间判断偏保守。
- 显式写
flex: 0 0 auto（左）、flex: 1 1 0（中）、flex: 0 0 auto（右）可绕过歧义 - 不要依赖
flex: 1简写——它等价于flex: 1 1 0%，而0%在部分 Safari 中表现异常 - 用
flex-basis: 0替代0%更稳妥，尤其当内容为空或极简时
想让中间栏最小 300px、最大 600px，左右固定，怎么配 flex-grow？
不能只靠 flex-grow 实现范围限制，它只管“分多少”，不管“能不能分”。得配合 min-width/max-width 和 flex-shrink。
参数差异：flex-grow 控制扩张能力，flex-shrink 控制收缩能力，flex-basis 是起点宽度——三者必须协同。
- 中间项设
flex: 1 1 0+min-width: 300px+max-width: 600px - 左右项设
flex: 0 0 auto，再加具体宽度（如width: 80px）或flex-basis - 父容器记得加
min-width: 460px（300+80+80），否则 Flex 可能强行压缩中间项到小于 300px
flex-grow 数值本身，而是你没意识到它的作用域仅限于“剩余空间”，以及浏览器对 flex-basis 的隐式处理有多不统一。 
