CSS 网格FR 小数单位概述

电玩女神 2023-09-28 09:00 20阅读 0赞

了解 CSS 中的 FR 单元：一个在调整网格内间隙时自动计算布局划分的输入。

分数 - 或分数单位 - 正在改变生活。为什么？因为它们是目前最灵活、反应最灵敏的单位！太糟糕了，它们只存在于网格中。

### 什么是分数（1FR）？ ###

分数或 1FR 是整体的一部分。1 分数是可用空间的 100%。2 份各占 50%。因此，1FR 是可用空间的 1/2。如果有250个分数？那么每个分数（1FR）是 1/250 或 0.4%。

因此，1 个分数是 1（或 100）除以分数的总数。我们将在下面对此进行更多探讨。

![4962562241fcc58e652ca442f040c10e.png][]

#### 2FR多少钱？ ####

是2分！

![43139208e53d6ace947b02bceeadcd5c.png][]

### 分数与百分比 ###

无论您要使用分数还是百分比，您需要做的第一件事是：

1.  确定您需要多少轨道（列或行）
2.  做计算
3.  创建轨道
4.  将值应用于每个轨道

#### 让我们使用百分比 ####

例如，您有四列。您希望它们的大小都相同并填充可用空间。您可以将每列设置为 100/4=25% 宽。

![d1212f4f7391c937f584b1c24c5fcb28.png][]

4*列 25% 宽度，每列填充 100% 的网格容器。*

但是，如果稍后您决定使其中一列比其他列大一倍怎么办？（2X+X+X+X=100，X是多少？）

![fb9932b7e9ee2f0d12beca0e5634c61d.png][]

*如果将一列更改为 50% 宽，这些列将溢出网格容器。您需要重新计算宽度值并再次更改每列的大小。*

如果您需要添加另一列怎么办？现在五列需要加起来总共 100。所以，每列需要是 100/5=20%。如果您不想溢出，则需要更新每列的值。

![b8792e5b20de9fc40d119642df1a5aa7.png][]

5 列 25% 宽度将溢出网格容器。您需要将每列的大小调整为 20% 宽。

如果您需要删除一列怎么办？或增加差距？你明白了，对吧？对于百分比，每次您需要添加或删除列、更改其大小、添加间距或更改间距大小时，您都需要：

1.  重新计算每列的大小
2.  将新的大小值重新应用到每一列

#### 那么，分数（FR）如何拯救世界呢？ ####

同样，您有四列。您希望它们的大小都相同。

1.  创建 4 列
2.  而已！每列默认宽度为 1FR

![598bc29f8cb0e49eb0253c424ecc42ca.png][]

大小值为 1FR 的列会拉伸以填充可用空间。

如果你想让一个比其他的大一倍怎么办？

1.  将那一列设置为 2FR
2.  而已！

![af7ee7fd72910ae82e20e56390b58998.png][]

2FR 等于 2 个分数。所以1FR的值是1除以分数的总数（2FR+1FR+1FR+1FR=5FR）。所以每个 1FR=可用空间的 1/5 或 20%。所以，2FR 是 2/5 或 40% 宽。

现在您有 4 列，但总共有 5 个FR，因此每个部分会自动占用 20% 的可用空间。因此，第一列占据了 2 个部分的空间，即 40%。您无需进行任何计算或更新每列的大小。

如果添加或删除一列怎么办？你什么都不做！分数只是工作！

![5ef5908e898a9a74886bb28c57bd78d6.png][]

在这里，我们删除了 2 个分数宽的第一列。现在分数的总数为 3。因此，每个 1FR 宽的列现在延伸了 1/3 的空间。

让我们添加一些空白。分数将适应欢迎他们中间的差距。

![301f082c47338875de90383657c01d25.gif][]

无论您添加间隙还是更改间隙值，FR 单元都会适应以填充可用空间。

### 那么，1FR 等于多少呢？ ###

*  分数：1FR=1/FR 总数
 *  百分比：1FR=100/FR 总数

在示例中：

1.  我们有 3 列，每列 1FR 宽。1FR = 1/3 = 33.333% 的可用空间。
2.  我们将网格容器设置为 1200px 宽。现在每个 FR 是 1200/3 = 400px 宽。
3.  我们添加另一列。我们现在有 4 列。列调整以适应可用空间的 1/4。那是25%。
4.  我们将第一列设为 2FRs 宽。其余的仍然是 1FR 宽。现在总数为 2FR + 1FR + 1FR + 1FR = 5FR。因此，1FR 现在是 1/5 = 20%。第一列是 2FRs = 2/5th = 40%。
5.  我们将第一列设为 200px 宽。其余的仍然是 1FR 宽。现在总数是 200px + 3FRs。1FR = 可用空间的 1/3 或 33.333%。可用空间是多少？它是网格容器的宽度 (1200px) 减去第一列的宽度 (200px) = 1000px。我们需要计算每个FR的值吗？不！FR 单元为我们做这件事。
6.  现在，让我们将第一列恢复为 1FR 并添加间隙。让我们将列间距设置为 16px。每列仍然占用可用空间的 1/4。可用空间再次为 1200 像素 - 间隙总数 (3\*16 像素)。1 Fr 是……没关系！它只是工作！

### 1FR 和内容 ###

只要内容灵活，小数单位就是总数的 1 部分。意思是，只要里面的内容可以缩放以适应列或行，1FR 轨道的大小是相等的。但是，一旦内容停止缩放以适合轨道，具有 FR 值的轨道将调整以使内容适合。因此，如果一列有一个固定宽度的网格子节点，**则该列的宽度永远不会小于网格子节点的宽度**。

因此，具有 1FR 宽度的列的最小值等于内容宽度，无论该宽度是设置的固定单位（如 400 像素），还是文本元素中最长的单词。

但是网格中的其他列会发生什么？它们按比例缩小。为什么？好吧，这就是发生的事情：

1.  我们有 4 列。每个都有 1FR 的宽度。每一列都是相等的。1FR=25% 的可用空间。

![d4eaa6e9127f074eb6a879f956beba8b.png][]

1.  在一列中，我们添加了一个宽度为 400 像素和最大宽度为无的图像。现在此列不能小于 400px。但这并不意味着现在 1FR=400px。这意味着第一列现在是 400px 宽。

![64733a51f112d67531c4d8df9bd57a2c.png][]

其他三列各占剩余空间的 1 分之一。这是剩余空间的 33.33%。

行也是如此，1FR 高度的行的最小值等于内容高度，除非您在网格子项上设置了[溢出：隐藏。][Link 1]

FR 自动设置尊重内部内容的最小值。所以对于 FR，最小值是自动的（或自动），最大值是我们设置的值（1FR，2FR..）

### 最小值/最大值 ###

所以，1FR 在技术上是 min/max(auto, 1FR)，意思是 min=auto，max=1FR。

现在，您当然可以通过将大小设置从**default**切换到**min/max**来覆盖此最小值。最大值为 1FR，最小值可以是您指定的任何值。但是，请注意，此轨道内任何固定宽度大于您在此处设置的最小值的内容都会溢出网格单元格。

![5687cc8c32395d3c1bf06b886486d300.gif][]

您可以在最小/最大设置中为轨道的最小和最大尺寸指定任何值。具有**最小值/最大值**的轨道将大于或等于**最小值**且小于或等于**最大值**。

例如，默认情况下，一行的高度为 auto。这允许它随着内容的扩展或收缩。将最小/最大值设置为行是创建灵活行的好方法，这些行不会缩小到设置的最小值之外。假设您想要一个至少 5VH 高的行，但不希望里面的任何内容溢出该行或被裁剪。您需要做的就是将行大小设置为 min=5VH，max=auto。

[4962562241fcc58e652ca442f040c10e.png]: https://img-blog.csdnimg.cn/img_convert/4962562241fcc58e652ca442f040c10e.png
[43139208e53d6ace947b02bceeadcd5c.png]: https://img-blog.csdnimg.cn/img_convert/43139208e53d6ace947b02bceeadcd5c.png
[d1212f4f7391c937f584b1c24c5fcb28.png]: https://img-blog.csdnimg.cn/img_convert/d1212f4f7391c937f584b1c24c5fcb28.png
[fb9932b7e9ee2f0d12beca0e5634c61d.png]: https://img-blog.csdnimg.cn/img_convert/fb9932b7e9ee2f0d12beca0e5634c61d.png
[b8792e5b20de9fc40d119642df1a5aa7.png]: https://img-blog.csdnimg.cn/img_convert/b8792e5b20de9fc40d119642df1a5aa7.png
[598bc29f8cb0e49eb0253c424ecc42ca.png]: https://img-blog.csdnimg.cn/img_convert/598bc29f8cb0e49eb0253c424ecc42ca.png
[af7ee7fd72910ae82e20e56390b58998.png]: https://img-blog.csdnimg.cn/img_convert/af7ee7fd72910ae82e20e56390b58998.png
[5ef5908e898a9a74886bb28c57bd78d6.png]: https://img-blog.csdnimg.cn/img_convert/5ef5908e898a9a74886bb28c57bd78d6.png
[301f082c47338875de90383657c01d25.gif]: https://img-blog.csdnimg.cn/img_convert/301f082c47338875de90383657c01d25.gif
[d4eaa6e9127f074eb6a879f956beba8b.png]: https://img-blog.csdnimg.cn/img_convert/d4eaa6e9127f074eb6a879f956beba8b.png
[64733a51f112d67531c4d8df9bd57a2c.png]: https://img-blog.csdnimg.cn/img_convert/64733a51f112d67531c4d8df9bd57a2c.png
[Link 1]: http://university.webflow.com/article/overflow
[5687cc8c32395d3c1bf06b886486d300.gif]: https://img-blog.csdnimg.cn/img_convert/5687cc8c32395d3c1bf06b886486d300.gif