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中都没有.

Answer 1

不,根据规格

7.2.3.灵活长度:'fr'单位

灵活长度或<flex>是具有'fr'单元的维度,其表示网格容器中剩余空间的一部分.用fr单元调整的轨道称为柔性轨道,因为它们响应于剩余空间而弯曲,类似于柔性物品如何填充柔性容器中的空间.

注意:<flex>值不是<length> s(也不与<length> s兼容,如某些<percentage>值),因此它们不能在'calc()'表达式中表示或与其他单元类型结合使用.

^强调我的