flex-grow 本身不控制占比，只分配剩余空间；要实现严格2:1等比例，必须设flex-basis: 0并用flex简写（如flex: 2 1 0），确保起点一致、父容器有明确宽度、内容不干扰尺寸。

直接说结论：flex-grow 本身不控制“占比”，只分配「剩余空间」；想实现严格 2:1、3:1 这类动态宽度比，必须配合 flex-basis: 0，否则内容宽度会干扰结果。

为什么 flex-grow: 2 和 flex-grow: 1 不等于 2:1 宽度？

因为 flex-grow 只管“多出来的那部分”，不管“原本占多少”。浏览器先按 flex-basis（默认是 auto，即内容自然宽）排一遍，再把剩余空间按权重分。如果一个子项含长文本（原始宽 300px），另一个是空 div（原始宽 0），即使都设 flex-grow: 1，最终宽度也会严重不均。

• 设 flex-basis: auto → 起点是内容宽，flex-grow 只是锦上添花
• 设 flex-basis: 0 → 起点归零，flex-grow 才真正决定全部宽度比例
• 验证方法：用开发者工具看 computed 的 flex-basis 值，不是看声明里写了啥

怎么写才能让两个子项严格按 2:1 占满父容器？

必须统一 flex-basis 为 0，并显式声明 flex-shrink 行为，避免被意外压缩。推荐用 flex 简写，而不是单独写 flex-grow。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 左侧项：flex: 2 1 0 → grow=2, shrink=1, basis=0
• 右侧项：flex: 1 1 0 → grow=1, shrink=1, basis=0
• 别写 flex-grow: 2; flex-basis: 0 分两行——万一漏了 flex-shrink，IE11 或某些移动端会表现异常
• 父容器必须有明确宽度（比如 width: 100% 或固定值），否则“剩余空间”为 0，flex-grow 直接失效

动态改比例时最容易踩的坑

JS 改 style.flexGrow 或内联 flex 值时，旧的 flex-basis 可能残留。比如之前设过 flex-basis: 200px，现在只改 flex-grow，它还是从 200px 开始加。

• 安全做法：用 class 切换，比如定义 .ratio-2 { flex: 2 1 0; } 和 .ratio-1 { flex: 1 1 0; }
• 临时调试可加 min-width: 0 ——很多“不收缩”问题其实是文字或图片触发了最小内容宽保护
• IE11 对 flex-grow: 0 解析异常，会当成 1，此时必须写成 flex: 0 0 auto 降级
• flex: 1 是 flex: 1 1 0% 的简写，但规范要求 0% 应等价于 0（无单位），实际中写 0 更稳妥

真正难的从来不是算比例，而是确保所有子项起点一致、父容器有空间、内容不锁死尺寸——这三者缺一，flex-grow 就只是个摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！