36

查看 Windows 8 Metro 风格应用程序中的以下 CSS，什么是“fr”？

-ms-grid-columns: 638px 1fr;
4

2 回答 2

62

关于您的确切问题，对于这个特定示例，我们假设列的总可用宽度为 1200 像素。由于第一列的宽度是固定的，它将占用 638px，剩余空间（562px）将是空闲的。因此，在这种情况下，

1fr = 562px

现在让我们假设您的样式如下：-

-ms-grid-columns: 638px 1fr 2fr;

那么在这种情况下，剩余的 562px 空闲空间将被分成三部分，第二列将被分配 1/3 空间，第三列将被分配 2/3 空间。

于 2013-07-25T04:35:54.557 回答
42

它代表“分数”或“分数单位”，这是 CSS Level 3 中建议的单位。

来自https://www.w3.org/TR/css3-grid-layout/#fr-unit：

分数值是适用于 grid-rows 和 grid-columns 属性的新单位......分数空间的分布发生在所有或基于内容的行和列大小达到最大值之后。然后从可用空间中减去行或列的总大小，其余部分按比例分配给小数行和列。

来自http://msdn.microsoft.com/en-us/library/windows/apps/hh780610.aspx：

...小数单位 (1FR)... 表示布局固定大小和自动大小的轨道（行或列）后网格可用的所有空间的一部分。

此外，来自http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/：

1fr 是一个“小数单位”，是“元素中剩余空间”的一种说法。

于 2012-03-10T21:11:09.110 回答