CSS的`calc()`函数支持`fr`单位吗？

Question

作为问题标题所示，CSS的calc()函数是否支持fr单位，就像以下示例中使用的那样？

.sample-grid {
    --main-fr: 60fr;
    grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr));
}

我的初步猜测是它不会 - 不论在Firefox还是Chrome中。

- Harshal Patil

---

问题中的示例似乎将 fr 单位视为百分比（实际上并不是这样），这可能是从不同角度解决问题的好迹象。 - stealththeninja

Answer 1

不，根据规格的说法

7.2.3. 可变长度：'fr'单位

可变长度或<flex>是带有'fr'单位的尺寸，它代表网格容器中剩余空间的一部分。使用fr单位调整大小的轨道称为可伸缩轨道，因为它们会根据剩余空间弹性调整大小，类似于弹性容器中的弹性项目填充空间。

注意：<flex>值不是<length>（也不与<length>兼容，例如某些<percentage>值），因此不能在'calc()'表达式中表示或与其他单位类型组合。

^{我强调了一下}

- Kaiido