flex: var(--ratio) 失效是因为 flex 是简写属性，要求子值为数字或关键字，而未解析的 var() 不被识别；正确做法是拆解 flex，仅对 flex-grow 使用 var(--ratio)，并设 flex-basis: 0。
直接用 flex 的数值比例 + CSS 自定义属性（--*）就能实现动态比例分配，无需 JS 干预，但必须注意自定义属性不能直接参与 flex 计算——它得先被 var() 注入，再经由 calc() 或作为 flex-grow 等独立属性值使用。
为什么 flex: var(--ratio) 会失效？
CSS 中的 flex 是简写属性，解析时要求子值（如 flex-grow）必须是数字或关键字（none、auto），而 var(--ratio) 在未被计算前只是个“未解析的引用”，浏览器拒绝将其当作有效数值处理。常见错误现象是：样式完全不生效，元素回退到默认 flex: 0 1 auto 行为。
以下写法均无效：
.item { flex: var(--ratio); } /* ❌ 语法错误 */
.item { flex: calc(var(--ratio)); } /* ❌ calc() 不能单独包裹一个变量作 flex 值 */
正确写法：拆解 flex 并单独绑定 flex-grow
把 flex 拆成 flex-grow、flex-shrink、flex-basis 三部分，只让可变部分（通常是 flex-grow）接 var()。这是最稳定、兼容性最好（Chrome 49+、Firefox 31+、Safari 9.1+）的方式。
-
flex-grow支持var()，且会自动转为数字（前提是--ratio值本身是纯数字，如2，不是2px或2em） -
flex-shrink和flex-basis可固定写死，避免干扰 - 父容器仍需保持
display: flex，否则子项的flex-grow不起作用
示例：
:root { --ratio-a: 2; --ratio-b: 3; --ratio-c: 1; }
.container { display: flex; }
.item-a { flex-grow: var(--ratio-a); flex-shrink: 1; flex-basis: 0; }
.item-b { flex-grow: var(--ratio-b); flex-shrink: 1; flex-basis: 0; }
.item-c { flex-grow: var(--ratio-c); flex-shrink: 1; flex-basis: 0; }
此时三个子项将按 2:3:1 占据剩余空间。
进阶技巧：用 calc() 实现带偏移或归一化的动态比例
如果需要根据屏幕宽度、字号或其他变量做比例微调（比如“至少占 200px，再按比例分剩余”），就得靠 calc() 配合 var()。关键点是：所有单位必须一致，且 calc() 必须出现在支持它的属性里（如 flex-basis 或 width），不能塞进 flex 简写中。
常见组合：
-
flex-basis: calc(var(--min-width, 200px) + var(--ratio, 1) * 1fr);→ 错误：1fr不能和px相加 -
flex-basis: calc(var(--min-width, 200px) + (var(--ratio, 1) - 1) * 50px);→ 正确：单位统一，且减法后仍是长度 - 更安全的做法是把比例逻辑留在
flex-grow，flex-basis固定为0，避免单位混用风险
容易被忽略的坑：继承与作用域、flex-basis: 0 的必要性
自定义属性默认不继承，若在某个子容器里改了 --ratio，它只影响该容器及其后代，不会污染全局。但这也意味着：你必须确保 var(--ratio) 调用位置的祖先链上确实定义了该变量，否则取值为 initial（即无效值），导致 flex-grow 回退到 0。
另一个高频翻车点是漏写 flex-basis: 0。如果不设，flex-grow 会基于元素原有内容宽高去“拉伸”，而非从零开始按比例瓜分剩余空间——结果就是比例失真，尤其当子项内容长度差异大时。
所以实际项目中，推荐模板写法：
.item {
flex: 0 1 0; /* 先重置，再单独设 grow */
flex-grow: var(--ratio, 1);
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
