在 CSS3 中，flex-grow 为 0.1 的弹性项目应该占用所有额外的 space 还是只占用 10%？

Question

下面的第三个弹性项目有一个 flex-grow 的非零值，即 0.1。这可能是合理的，我还读到一个建议，它应该占用任何额外 space 的 100%，因为其他 flex 项目是 0，并且不能增长。这个是 0.1 甚至 0.1 / 0.1 是 100%（作为比率）。然而，实际上在 Chrome 和 Firefox 上它只占用了额外 space 的 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

However, in practice on Chrome and Firefox it only took 10% of the extra space.

这是正确的行为。

Find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio. ^flexbox-ref

由上可知，flex-grow值有效表示可用space的百分比，而flex-grow: 1表示可用space的100%。还有，加上flex-grow后的尺寸就是这样推导出来的。

flex item's base size + (remaining free space * (flex item's flex factors / unfrozen flex item's flex factors))

如果您在问题的上下文中为 flex-grow 指定 0.1，remaining free space 将是 initial 的 0.1 倍免费 space:

If the sum of the unfrozen flex items’ flex factors is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space. ^flexbox-ref

所以，利用上面的公式，可以推导出第三个flex item的大小如下：

flex item's base size + (initial free space * 0.1 * (0.1 / 0.1))

= flex item's base size + (initial free space * 0.1)

因此 flex-grow: 0.1 的结果是 初始剩余可用空间的 10% space。

Answer 2

flex-grow 的最小值是 1。如果您加 1，它将占据 space 的剩余部分。 flex-grow 的默认值为 0，这就是为什么您的前两个 div 只占用它们的值所做的 space。您会注意到使用 flex-grow 时它的行为会有所不同，如果您使用第一个 div 并添加 flex-grow: 1;，它将与最后一个大小相同。另一方面，如果你使用 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>

Answer 3

从the specification您可以阅读：

Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.

您可以继续阅读本节的详细信息，您将了解为什么您的 0.1 实际上是免费 space 的 10%。

重要部分：

This pattern is required for continuous behavior as flex-grow approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space

在 CSS3 中，flex-grow 为 0.1 的弹性项目应该占用所有额外的 space 还是只占用 10%？

In CSS3, should a flex item with flex-grow 0.1 be taking all the extra space or just 10%?

css

flexbox

flex-grow