flex-grow 不支持 CSS 变量，因规范限制其值必须为数字，var() 无法在该上下文中解析为数值；需用 flex 简写配合 calc() 或 class 切换实现动态控制。
flex-grow 本身不接受 CSS 变量作为值，直接写 flex-grow: var(--ratio) 会失效——浏览器解析时把它当无效声明丢弃，退回到默认的 0。
为什么 flex-grow: var(--ratio) 不生效
CSS 的 flex-grow、flex-shrink 和 flex-basis 都属于「可动画但不可变量化」的属性。它们只接受数字、长度或关键字（如 auto），而 CSS 自定义属性（var()）在这些位置不会被计算为数值上下文。
- 即使
--ratio: 2定义正确，flex-grow: var(--ratio)仍被当作语法错误忽略 - 开发者工具里能看到该声明被划掉，computed 值显示为
0 - 这不是浏览器兼容性问题，而是 CSS 规范明确限制：
flex-grow不在var()支持的属性列表中
用 flex 简写 + calc() 曲线救国
真正能配合变量的路径是：把比例逻辑塞进 flex 简写，并用 calc() 绕过解析限制——前提是变量本身是数字类型且无单位。
- 定义变量时别加单位：
:root { --grow-1: 1; --grow-2: 2; } - 这样写才有效：
flex: calc(var(--grow-1) * 1) 1 auto;（calc()强制触发数值求值） - 更稳妥的写法是直接用
flex三值简写：flex: calc(var(--grow-ratio)) 1 auto; - 注意：
calc()里只能做基础运算，不能调函数或嵌套var()多层引用
推荐方案：class 切换代替运行时变量
实际项目中，靠纯 CSS 变量动态控制 flex-grow 比例，不如用 class 控制更可靠、可预测。
立即学习“前端免费学习笔记（深入）”；
- 预先定义好几组比例组合：
.flex-grow-1 { flex: 1 1 auto; } .flex-grow-2 { flex: 2 1 auto; } - JS 动态切换 class：
el.classList.toggle('flex-grow-2', isWideMode) - 媒体查询也优先用 class 触发：
@media (max-width: 768px) { .sidebar-wide .panel { flex: 0 0 100%; } } - 避免在 style 属性里写
flex（内联样式权重太高，媒体查询难覆盖）
容易被忽略的 flex-basis 影响
哪怕你成功让 flex-grow 动态起来，如果没显式设 flex-basis，行为可能和预期差很远。
-
flex: 1实际等价于flex: 1 1 0%，不是0px—— 这个隐式0%会让元素从“零宽度”开始拉伸，吞掉全部容器空间 - 想保留内容自然宽再弹性伸缩？必须写
flex: 1 1 auto或flex: 1 1 max-content - 响应式换列时，
flex: 0 0 100%比flex-grow: 1更可控，因为完全禁用拉伸，只靠宽度断言
