部分单位概况

分区（或分数单位）对我们的生活有着重大影响。为什么？因为它们提供了最大的多功能性和适应性！它们处理网格分区，同时考虑其间的空格。您可以在使用网格的任何地方合并 FR 单位，并且由于快速堆叠元素使用网格，因此您可以在自定义快速堆叠时使用 FR 单位。

什么是分数 (1FR)？

分数或 1FR 代表整体的一部分。单个 1FR 分数相当于可用空间的 100%。如果有两个 1FR 分数，则每个分数占可用空间的 50%。因此，在这种情况下，1FR 等于可用空间的一半。假设有 250 个 1FR 分数？那么每个分数 (1FR) 等于 1/250 或 0.4%。

• 分数形式：1FR = 1/FR 总数
• 百分比：1FR = 100/FR 总数

那么，2 个分数（2FR）是多少？

两个分数或 2FR 表示整体的两个部分。因此，如果有 1FR + 1FR + 2FR，则每个 1FR 分数等于 25%，而 2FR 分数表示 50%。

分数与百分比相对

利用百分比

假设您要创建一个包含 4 列的网格，每列大小相同且占据整个可用区域。您可以将 100 除以 4，从而为每列分配 25% 的宽度。

但是，如果您希望将一列放大一倍，该怎么办？在这种情况下，您需要 2X + X + X + X，其中 X 保持为 25%，总和为 125%。如果您将一列的宽度更改为 50%，则列将超出可用空间 25%。由于列的宽度是以百分比确定的，因此您必须重新校准宽度值并再次重新调整每列的大小。

想象一下想要引入另一列。现在，5 列的总数应为 100。因此，每列必须是 100/5 = 20%。您必须更新每列的值，以避免它们溢出可用空间。

每次您需要添加或删除一列、修改行或列的大小、合并间隙或在使用百分比时更改间隙大小时，您都需要重新计算每列的大小并将新的尺寸值重新应用于每列。

利用分数（FR）

再次，假设您希望网格包含 4 列，每列大小相同，并占据整个可用空间。要实现这一点，请设置 4 列。就这样！默认情况下，每列的宽度为 1FR，它们将拉伸以利用可用空间。

如果您希望某一列的大小是其他列的两倍，只需将其指定为 2FR — 相当于整体的 2 个部分。其余列仍设置为 1FR，每个列占整体的 1 个部分。

添加或删除行或列

如果您想添加或删除行或列，您可以这样做，而不必调整它们的大小。使用 FR，行和列将自然调整。

合并或改变差距

通过利用 FR 单位，您可以在网格中包含间隙，并且行和列将自动调整。

FR 和内容

1FR 表示当行或列单元格内的内容可适应（即能够缩放以适合列或行）时，整体的一部分。然而，一旦内容停止缩放，具有 FR 值的行或列将适应以容纳内容。其他列和行将按比例缩小。

• 应该 柱子 包含具有固定宽度的网格子项，列的宽度将始终等于或超过网格子项的宽度。此外，列的宽度永远不会小于文本元素中最长的单词。您可以通过将 overflow: hidden 应用于网格子项来消除此问题。
• 如果 排 具有固定高度的网格子项，行的高度将始终等于或超过网格子项的高度。您可以通过在网格子项上使用 overflow: hidden 来解决这个问题。

最小/最大

FR 会自动建立符合所附内容的最小值。因此，对于 FR，最小值是自动的（即自动），最大值对应于您设置的值（例如 1FR、2FR 等）。

您可以通过从 默认 到 最小/最大 为了 浆纱。最大值为 1FR，而最小值可以是您选择的任何值。但是，请注意，任何固定宽度超出您指定的最小值的内容都将溢出单元格。