flex-grow 0.1 的弹性项目应该占用所有额外空间还是仅占用 10%？

Question

以下第三个弹性项目的

flex-grow

为非零值，即

0.1

。这可能是合理的，我还读到一个建议，它应该占用 100% 的任何额外空间，因为其他弹性项目是

0

，并且无法增长。这个是

0.1

甚至

0.1 / 0.1

是 100%（作为比例）。然而，实际上在 Chrome 和 Firefox 上它只占用了 10% 的额外空间。为什么以及它应该如何表现？

#container {
  display: flex;
  border: 1px dashed blue
}

#container div {
  border: 1px dashed orange
}

#container div:last-child {
  flex-grow: 0.1;
  background: #ccc
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Answer 1

然而，在 Chrome 和 Firefox 上的实践中，它只占用了 10% 的额外空间。

这是正确的行为。

求该商品的弹性增长因子与该行中所有未冻结商品的弹性增长因子之和的比率。将项目的目标主尺寸设置为其弹性基本尺寸加上与比例成比例的剩余可用空间的一部分。 ^flexbox-ref

从上面可以看出，

flex-grow

值有效地表示了可用空间的百分比，而

flex-grow: 1

代表了100%的可用空间。另外，加上

flex-grow

后的尺寸就是通过这样的等式导出的。

弹性项目的基本尺寸 + (剩余可用空间 * (弹性项目的弹性系数 / 未冻结的弹性项目的弹性系数))

如果您在问题中为

flex-grow

指定 0.1，则 剩余可用空间 将是 初始可用空间的 0.1 倍：

如果未冻结弹性项目的弹性因子之和小于 1，则将初始可用空间乘以该总和。如果该值的大小小于剩余可用空间的大小，则将其用作剩余可用空间。 ^flexbox-ref

因此，使用上面的公式，可以得出第三个弹性项目的大小如下：

弹性项目的基本尺寸 + (初始可用空间 * 0.1 * (0.1 / 0.1))

= Flex 项目的基本尺寸 + (初始可用空间 * 0.1)

所以

flex-grow: 0.1

的结果是初始剩余可用空间的10%。

Answer 2

从规范您可以阅读：

0 到 1 之间的 Flex 值有一些特殊的行为：当线上的 Flex 值之和小于 1 时，它们将占用小于 100% 的可用空间。

你可以继续阅读本节的详细内容，你就会明白为什么你的

0.1

实际上是空闲空间的

10%

。

重要部分：

当 flex-grow 接近零时，这种模式是连续行为所必需的（这意味着该项目不需要任何可用空间）。如果没有这个， flex-grow: 1 项目将占用所有可用空间；但是 flex-grow: 0.1 项和 flex-grow: 0.01 项也是如此，直到最后该值足够小而下溢到零，并且该项突然不占用任何可用空间

Answer 3

flex-grow 的最小值为 1。如果加 1，它将占用那里的剩余空间。

flex-grow

 的默认值为 0，这就是为什么你的前两个 div 只占用它们的值所占用的空间。您会注意到，使用 

flex-grow

 时它的行为会有所不同，如果您使用第一个 div 并添加 

flex-grow: 1;

 ，它将是最后一个 div 的大小。另一方面，如果你选择 

flex-grow: 2;

 ，它会比其他两个大，但不会是它可以被打断的两倍大。在实际项目中，我很少使用除 

flex-grow: 1;

 以外的任何东西，如果我想要两倍大的东西或类似的东西，我会使用 

flex-basis

 或 

width

。希望这有帮助。

检查我的片段。如果您希望它占据特定的百分比，请使用

flex-basis

 或 

width

 属性。

#container {
  display: flex;
  border: 1px dashed blue
}

#container div {
  border: 1px dashed orange
}

.remaining-space {
  flex-grow: 1;
  background-color: deepskyblue;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div class="remaining-space">3</div>
</div>