`flex-grow:0` 是如何解釋的？

Question

我想知道 Flexbox 模型中的flex-grow:0是否意味着

• width:0或
• "增長=0" 。

如果它意味着后者，是否可以說這等於width:auto和display:inline-block ，即它需要與顯示一樣多的寬度？

Answer 1

flex-grow:0只是意味着在項目大小計算期間不會調整項目的大小以適應Flex容器的完整主軸大小 。

規范將其描述為：

此<number>組件設置flex-grow longhand並指定flex增長因子，該因子確定當分配正空閑空間時，flex項目相對於Flex容器中其余Flex項目的增長量。 省略時，將其設置為1 。

我強調了主軸尺寸 ，因為你應該知道， flex-grow與flex容器的主軸有關，可以是寬度或高度尺寸，具體取決於用戶瀏覽器的flex-direction和寫入方向性。

因此，我們不能假設等於你的假設。

但是當我們談論flex-direction: row和寫方向性LRTB（從左到右，從上到下）然后它們以與width: auto;類似的方式工作width: auto; 。 項目顯示為內聯，但它們仍然不會呈現相同，因為HTML源代碼中的每個換行符都沒有添加空格，正如我們通常使用常用內聯元素看到的那樣。

width: 0怎么樣？

Flex項目寬度與flex-basis屬性相關聯，而不是與grow factor相關聯。 雖然當定義生長和收縮因子且非零時，彈性屬性優先於項的width或height 。

Answer 2

flex-grow: 0幾個例子flex-grow: 0

以下示例可能對學習 flex-box 的人有所幫助。

基本上， flex-grow 執行以下操作：

• 檢查容器是否比所有孩子都寬
• 如果是，則根據每個孩子的flex-grow按比例分配剩余空間

所以，如果我們有兩個孩子，例如flex-grow分別等於：

• 1 和 1：給兩個額外空間的相同份額
• 1 和 2：給第二個比第一個多 2 倍
• 0 和 1：給第二個無限多於第一個（1/0 = 無窮大），即根本不增長第一個，增長第二個以填充容器的其余部分
• 0 和 0：它們都不會增長，並且孩子最終可能比容器小。 所以 0 可以被看作是一個稍微神奇的值，簡單的意思是“永遠不會增長”，而不是更嚴格意義上的比例（因為 0/0 的含義沒有明確定義）。

以下是以下代碼在 Chromium 85 上的呈現方式：

 for (let container of document.getElementsByClassName('container')) { const widths = []; for (let child of container.children) { widths.push(child.offsetWidth) } container.insertAdjacentHTML('afterEnd', `<div>widths: ${widths.join(' ')}</div><br>`) }

 .container { display: flex; width: 400px; } .container .child-1 { background-color: red; height: 2em; } .container .child-2 { background-color: blue; height: 2em; } .container .subchild-1 { background-color: green; } .container .subchild-2 { background-color: yellow; }

 ruler <div class="container"><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div></div> flex-grow 1 1. Adds 75 (175 = 100 + 75) to child-1 and 75 to child-2 (225 = 150 + 75) <div class="container"> <div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div> <div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div> </div> flex-grow 1 2. child-1 wants 100, child-2 wants 200. We have 100 left to 400. child-2 to grow 2x more than child-1 (33 vs 67). <div class="container"> <div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div> <div class="child-2" style="flex-grow: 2;"><div class="subchild-2" style="width: 200px">200</div></div> </div> flex-grow 0 1. child-1 simply cannot grow, so child-2 takes up all remaining space. <div class="container"> <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div> <div class="child-2" style="flex-grow: 1"><div class="subchild-2" style="width: 50px">50</div></div> </div> flex-grow 0 0. How much is 300 divided by 0? Doesn't matter, if neither can grow we go below the min. <div class="container"> <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div> <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 50px">50</div></div> </div> flex-grow 0 0. No more space left, all fits perfectly. flex-grow 0 does nothing. <div class="container"> <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 100px">100</div></div> <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 300px">300</div></div> </div> flex-grow 0 0. Minimal content size doesn't fit, nothing we can do about it. <div class="container"> <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 100px">100</div></div> <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 400px">400</div></div> </div>