flex-grow: var(--r) 不生效的三大典型断点：父容器未设 display: flex；子元素 width 或 flex-basis 抢占剩余空间；变量值含单位或空格；需用 style="--r: 1.777" 注入纯数字，fallback 写法 var(--r, 1) 兜底，flex-basis: 0 确保按比例瓜分空间。
flex-grow: var(--r) 不生效的典型断点
直接写 flex-grow: var(--r) 却没反应，大概率卡在这三处：父容器没设 display: flex；子项写了 width 或 flex-basis（比如 width: 200px），抢走了“剩余空间”；变量值带单位或空格，比如 --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
flex-grow 分配的是「剩余空间」，不是容器总宽的百分比。如果子项 flex-basis: auto（默认），浏览器先按内容宽度占位，再把剩下的缝隙按权重分——结果完全偏离比例预期。显式设 flex-basis: 0（注意：是 0，不是 0px 或 0%）才能抹掉原始尺寸干扰。推荐统一用简写：flex: 2 1 0 表示 flex-grow: 2、flex-shrink: 1、flex-basis: 0。
移动端与旧版 Safari 的兼容细节
flex-grow: var(--r) 在 Chrome、Firefox、Safari ≥15.4 支持；Safari ≤15.3 和 IE11 会忽略，需降级处理（比如 JS 注入 fallback 值或固定比例）。iOS Safari 对 calc(100% / var(--cols)) 有像素级误差，可加 max-width: calc(var(--col-min-width) - 1px) 兜底。安卓 WebView 对 0% 解析不稳定，可改用 0px 并配合 min-width: 0。
实际复杂点不在“能不能写变量”，而在于 flex-basis 和 flex-grow 的协同时机——它发生在 layout 阶段早期，一旦内容宽度、内边距、盒模型类型（box-sizing）没对齐，比例就会悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
