代码之家 › 专栏 › 技术社区 › Harshal Patil

css`calc()`函数是否支持`fr`单位?

css-grid css3 css html

2

Harshal Patil · 技术社区 · 7 年前

正如问题的标题所示,CSS calc() 功能支持 fr 下例中使用的单位?

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

1 回复 | 直到 7 年前

1

6

Kaiido 7 年前

不,根据 specs

7.2.3. 弹性长度:“fr”单位

弹性长度或<灵活>是具有 '法语' 单位,表示网格容器中剩余空间的一小部分。轨道尺寸 fr 因为它们对剩余空间的响应类似于flex项如何填充flex容器中的空间。

注意:<灵活>值不是<长度>s(也不兼容<长度>s、像一些<百分比>价值观), 因此它们不能在“calc()”表达式中表示或与其他单位类型组合 .