CSS Windows 8 Metro 风格应用程序中的 fr 单位是啥意思？

Posted 2023-03-04

【中文标题】CSS Windows 8 Metro 风格应用程序中的 fr 单位是啥意思？

【英文标题】：What does the fr unit in a CSS Windows 8 metro style application mean?CSS Windows 8 Metro 风格应用程序中的 fr 单位是什么意思？

【发布时间】：2012-03-27 20:33:07

【问题描述】：

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

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

【参考方案1】：

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

1fr = 562px

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

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

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

【讨论】：

恕我直言，这个答案要好得多。

【参考方案2】：

它代表“分数”或“分数单位”，这是 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 是一个“小数单位”，是“元素中剩余空间”的一种说法。

【讨论】：

现在更有意义了。谢谢。比我们以前不得不使用浮动和疯狂的 CSS hack 要好得多。