flex-grow: var(--r) 不生效的三大原因：父容器未设 display: flex、子元素 width 或 flex-basis 抢占剩余空间、变量值含单位或空格；需用 style="--r: 1.777" 注入纯数字，fallback 写法 var(--r, 1) 兜底，flex-basis: 0 确保按比例瓜分空间，Chrome/Firefox/Safari≥15.4 支持，旧版需降级。
flex-grow: var(--r) 为什么有时不生效
不是变量没传进去，而是三个常见断点卡住了计算链：父容器没设 display: flex、子元素写了 width 或 flex-basis 抢占了剩余空间、变量值带单位或空格（比如 --r: "1.777" 或 --r: 1.777px）。调试时直接看开发者工具的 computed 栏里 flex-grow 解析结果——如果是 0 或 inherit，基本就在这三类里。
HTML 中怎么安全注入 CSS 变量值
必须用内联 style 属性，不能用 data- 属性：style="--r: 1.777" 才能被 CSS 读取。变量名要合法：推荐 --ratio 或 --r，不能以数字开头，不能含特殊符号。值必须是纯数字，不能加引号、单位、空格。fallback 写法很重要：flex-grow: var(--r, 1) 能兜底，避免未定义时整个布局崩掉。
flex-basis 设成 0% 还是 auto？关键看你要不要内容兜底
想严格按比例瓜分容器宽度、完全忽略内容尺寸，就用 flex-basis: 0%（即 flex: 2 0 0%）；想让内容宽度参与初始占位、再伸缩，就用 flex-basis: auto（即 flex: 2 1 auto）。两者在计算上差异极大：0% 下剩余空间 = 容器宽 − 0，所有空间全靠 flex-grow 分；auto 下剩余空间 = 容器宽 − 内容宽度之和，更符合视觉预期但比例不绝对。
浏览器兼容性与降级处理要点
flex-grow: var(--r) 在 Chrome、Firefox、Safari ≥15.4 支持，Safari ≤15.3 会忽略。IE11 不支持 CSS 变量，必须降级为固定值或 JS 注入。移动端要注意：部分安卓 WebView 对 0% 解析不稳定，可改用 0px 并加 min-width: 0 配合。动态改变量后若布局卡顿，别直接操作 element.style，优先切 class 或用 CSSStyleSheet.insertRule 减少重排。
立即学习“前端免费学习笔记（深入）”；
实际复杂点不在“能不能写变量”，而在于flex-basis 和 flex-grow 的协同时机——它发生在 layout 阶段早期，一旦内容宽度、内边距、盒模型类型（box-sizing）没对齐，比例就会悄悄偏移。 
