在 CSS3 中，flex-grow 0.1 的 flex 項應該占用所有額外空間還是僅占用 10%？

Question

下面的第三個 flex 項有一個非零值的flex-grow ，即0.1 。 這可能是合理的，我還讀到了一個建議，它應該占用任何額外空間的 100%，因為其他 flex 項目是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% 的額外空間。

這是正確的行為。

找出項目的彈性增長因子與行上所有未凍結項目的彈性增長因子之和的比率。 將項目的目標主要大小設置為其 flex 基本大小加上與比率成比例的剩余可用空間的一小部分。 ^flexbox-ref

由上可知， flex-grow值有效地表示了可用空間的百分比，而flex-grow: 1表示可用空間的 100%。 此外，添加flex-grow后的大小也是由這樣的等式得出的。

彈性項目的基本尺寸+ (剩余可用空間* (彈性項目的彈性系數/未凍結彈性項目的彈性系數))

如果您在問題的上下文中為flex-grow指定 0.1，則剩余可用空間將是初始可用空間的0.1 倍：

如果未凍結的彈性項目的彈性系數之和小於 1，則將初始可用空間乘以該總和。 如果此值的大小小於剩余可用空間的大小，則將其用作剩余可用空間。 ^flexbox-ref

所以，使用上面的公式，第三個 flex item 的大小可以推導出如下：

彈性項目的基本大小 + (初始可用空間* 0.1 * (0.1 / 0.1))

= flex item 的基本大小 + (初始可用空間* 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 item 和 flex-grow: 0.01 item 也是如此，直到最后該值小到足以下溢為零並且該項目突然不占用任何可用空間

Answer 3

最小值為 1 作為 flex-grow 的值。 如果加 1，它將占用那里剩余的空間。 flex-grow默認值是 0，這就是為什么你的兩個第一個 div 只占用它們的值所做的空間。 您會注意到，如果您使用第一個 div 並添加flex-grow: 1; ，它會使用flex-grow表現不同flex-grow: 1; 它將是你最后一個的大小。 另一方面，如果您使用flex-grow: 2; 它會比其他兩個大，但不會像被中斷時那樣大兩倍。 在實際項目中，除了flex-grow: 1;我很少使用任何東西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>