在 calc() 中使用分数 (fr) 会给出“无效的属性值”

Posted 2023-03-06

【中文标题】在 calc() 中使用分数 (fr) 会给出“无效的属性值”

【英文标题】：Using fraction (fr) in calc() gives "Invalid property value"

【发布时间】：2018-10-27 14:02:51

【问题描述】：

我在使用 CSS Grid 时尝试在某些宽度上使用 calc()。所以我正在尝试的一件事是：

grid-template-columns: calc(1fr - 50px) calc(1fr - 50px);

因为我希望它是两个分数，但删除 50px，因为它用于填充等。但是，这样做时，Chrome 会说：“无效的属性值”。

calc() 不能用于分数，还是我在这里做错了什么？

【参考方案1】：

fr 单位不是标准长度，例如百分比或像素。它只代表剩余空间。

因此，fr 不能在 calc() 表达式中使用。

§ 7.2.3. Flexible Lengths: the fr unit

灵活长度是一个以fr为单位的维度，它表示 网格容器中剩余空间的一小部分。

fr 单位不是长度，因此它们不能在calc() 表达式中表示。

但是你真的需要calc()吗？

fr 仅适用于剩余空间，即在考虑宽度、边框、边距和内边距等真实长度后 留下的空间。

考虑单独使用fr。否则，请发布一个完整的问题示例。

【讨论】：

可能是 OP 在询问 grid-column-gap（或可能不是）