flex-grow可配合CSS变量动态算比例：在HTML中用style="--r:1.777"注入纯数字变量，CSS中写flex-grow:var(--r,1)并设flex-basis:0，Chrome/Firefox/Safari≥15.4支持，需防字符串、单位、width干扰及IE11兼容问题。
flex-grow 怎么配合 CSS 变量动态算比例
直接给 flex-grow 赋一个固定数字（比如 1 或 2）只能做静态比例，真要按每张图片的宽高比、每个模块的实际内容特征来分配空间，就得把比例“参数化”。CSS 变量就是干这个的——它让 flex-grow 的值能从 HTML 层注入，而不是写死在样式表里。
关键不是“能不能用变量”，而是变量怎么进、怎么算、浏览器认不认。Chrome、Firefox、Safari（≥15.4）都支持 flex-grow: var(--r) 这种写法，但 Safari ≤15.3 会忽略，得降级处理。
-
flex-grow接收的是无单位数字，所以 CSS 变量值必须是纯数字（如--r: 1.777），不能带单位或空格 - HTML 中用
style="--r: 1.777"注入，别用data-属性——那只是自定义属性，CSS 读不到 - 变量名要合法：不能以数字开头，不能含特殊符号，推荐用
--ratio或--r - 如果变量未定义，
flex-grow: var(--r, 1)的 fallback 写法可兜底，避免整个布局崩掉
为什么 flex-grow: var(--r) 有时不生效
不是变量没传进去，而是计算时机或依赖条件被卡住了。最常见三个断点：
- 父容器没设
display: flex——flex-grow在非 flex 容器里完全被忽略 - 子元素写了
width或flex-basis（比如width: 200px），直接抢占了“剩余空间”，flex-grow没东西可分 - 变量值是字符串（如
--r: "1.777"）或带单位（--r: 1.777px），CSS 解析失败，回退到默认0
调试时打开开发者工具，看 computed 栏里 flex-grow 最终解析成什么。如果是 0 或 inherit，基本就是上面三类问题之一。
立即学习“前端免费学习笔记（深入）”；
图片等高布局中如何用 --r 算 flex-grow
目标是：一行多图，高度一致，每张图保持原始宽高比。原理很直接——高度相同时，宽度 ∝ 宽高比。所以只要让每个 <li> 的 flex-grow = 图片的 width / height，Flex 就会按这个比例分剩余空间，最终所有项等高、图片不拉伸。
示例 HTML：
<ul class="gallery"> <li style="--r: 1.777"><img src="a.jpg"></li> <li style="--r: 1.333"><img src="b.jpg"></li> <li style="--r: 0.562"><img src="c.jpg"></li> </ul>
CSS：
.gallery {
display: flex;
}
.gallery > li {
flex-grow: var(--r);
flex-basis: 0;
min-width: 0;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
}-
flex-basis: 0是必须的，否则var(--r)只在“内容宽度之后的剩余空间”上起作用，结果严重偏移 -
min-width: 0防止图片内联元素触发最小宽度保护，尤其在小屏下 - 不要给
<li>设width或max-width，它们会和flex-grow冲突
IE11 和老 Safari 怎么兼容动态 flex-grow
IE11 完全不支持 flex-grow: var(--r)，Safari ≤15.3 对变量解析不稳定。这时候不能硬扛，得换思路：
- 服务端渲染时直接把
flex-grow值写死在 class 里（如item-ratio-177），绕过 CSS 变量 - 前端 JS 检测
CSS.supports('flex-grow', 'var(--r)')，不支持就 fallback 到calc()：比如width: calc(100% * 1.777 / (1.777 + 1.333 + 0.562)) - 更稳妥的降级是放弃动态，用预设几档比例（
ratio-16x9、ratio-4x3、ratio-1x1），靠 class 控制
真正难的不是怎么写变量，而是怎么确保变量值在所有环节里不被截断、不被转义、不被浏览器当成无效值丢弃——尤其是从后端模板或 CMS 输出时，容易多出空格或引号。
