flex-grow 不能直接用 var(--x)，因为它是「可动画但不可变量化」属性，只接受数字字面量、长度或关键字；var(--ratio) 不被解析为数值，浏览器直接丢弃该声明。
flex-grow 为什么不能直接用 var(--x)
因为 CSS 规范明确把 flex-grow、flex-shrink 和 flex-basis 划为「可动画但不可变量化」属性——它们只接受数字字面量（如 2）、长度（如 100px）或关键字（如 auto）。var(--ratio) 在这里不会被解析为数值，浏览器直接当无效声明丢弃，DevTools 里该行会被划掉，computed 值始终是 0。
哪怕你写 --ratio: 2 定义正确，也救不回来；这不是 Safari 或 Chrome 的兼容性问题，而是所有现代浏览器统一执行的规范行为。
用 flex 简写 + calc() 曲线救国
唯一可行的绕过方式是把变量塞进 flex 简写，并用 calc() 强制触发数值上下文：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
flex: calc(var(--grow-ratio)) 1 auto;是有效写法，但calc()内部不能嵌套var()或函数，只能做基础四则运算 - 变量必须定义为纯数字：
:root { --grow-ratio: 2; }；写成--grow-ratio: "2"或--grow-ratio: 2px都会失败 -
flex三个值顺序不能错：flex-grow、flex-shrink、flex-basis；漏掉后两个会触发隐式值（比如flex: 1等价于flex: 1 1 0%），容易导致拉伸异常
更推荐：用 class 切换代替运行时变量
实际项目中，靠纯 CSS 变量动态控制比例，远不如预设 class 可靠、易调试、易覆盖：
- 预先定义组合：
.flex-1 { flex: 1 1 auto; }、.flex-2 { flex: 2 1 auto; } - JS 切换：
el.classList.toggle('flex-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更可控，因为它完全禁用拉伸，只靠宽度断言
真正难的不是让比例动起来，而是让动起来之后的行为符合视觉预期——flex-basis 的取值、flex-shrink 是否允许压缩、父容器是否设了 min-width，任何一个环节出偏差，都会让整个弹性逻辑崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
