flex-grow 不接受 css 变量，因规范限定其为“可动画但不可变量化”属性，仅支持数字字面量、长度或关键字；var(--ratio) 在此上下文中不被解析为数值，故声明无效。
flex-grow 不接受 CSS 变量，直接写 flex-grow: var(--ratio) 会失效——浏览器把它当无效声明丢弃，computed 值始终是 0。
为什么 flex-grow: var(--ratio) 一定不生效
CSS 规范明确限制 flex-grow、flex-shrink 和 flex-basis 属于「可动画但不可变量化」属性。它们只接受数字字面量（如 2）、长度（如 100px）或关键字（如 auto），而 var(--x) 在这些位置不会被解析为数值上下文。
即使 --ratio: 2 定义正确，开发者工具里该声明也会被划掉；这不是兼容性问题，而是所有现代浏览器统一遵守的规范行为。
用 flex 简写 + calc() 曲线救国
唯一能绕过限制的路径是：把变量塞进 flex 简写，并用 calc() 强制触发数值解析——前提是变量本身是纯数字（无单位、无空格）。
-
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，漏掉后两个会导致隐式值干扰布局
更推荐：用 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
