了解 flex-grow

Question

我有 3 個 div，如果我給前兩個 div 賦予flex: 0.5 ，如果我給了flex-wrap: wrap ，最后一個 div 應該移動到下一行。 如果我錯了，請糾正。

以下是我的 html / css：

 .parent { display: flex; height: 100px; background-color: red; flex-wrap: wrap; }.child-1 { background-color: green; flex: 0.5; }.child-2 { background-color: yellow; flex: 0.5; }.child-3 { background-color: pink; }

 <div class="parent"> <div class="child-1">LOREN IPSUM LOREN IPSUM</div> <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div> <div class="child-3">LOREN IPSUMLOREN IPSUM</div> </div>

請為此檢查JSFiddle 。

提前致謝。

Answer 1

flex-grow屬性旨在在flex容器中分配容器中的可用空間。

它不適用於直接或精確調整柔性物品的尺寸。

從規格 ：

flex-grow ...確定當分配正空閑空間時，flex項目相對於flex容器中其余flex項目的增長量。

因此， flex-grow不會強制項目包裝。 以下是flex-grow: 1000示例flex-grow: 1000 ： demo

要定義彈性項目的長度，請使用width ， height或flex-basis 。

---

解釋flex-grow: 0.5

當您應用flex:0.5 ，您正在使用flex速記屬性來說明：

• flex-grow: 0.5
• flex-shrink: 1
• flex-basis: 0

flex-grow組件代表一定比例。 在這種情況下，它告訴flex項目消耗容器中一半的可用空間相對於其兄弟姐妹的flex-grow因子 。

因此，例如，如果容器的width: 600px並且三個div的總寬度為450px，則這將在可用空間中留下150px（ 演示 ）。

如果每個項目都有flex-grow: 1 ，則每個項目將消耗額外空間的50px，每個項目將計算width: 200px （ 演示 ）。

但是在你的代碼中，有兩個項目有flex-grow: 0.5 ，最后一個項目有flex-grow: 0 ，所以這里是它如何分解：

• div＃1將獲得75px（可用空間的一半）
• div＃2將獲得75px（可用空間的一半）
• div＃3將獲得0（因為它的flex-grow為0）

這些是現在的計算值：

• div＃1 = width: 225px
• div＃2 = width: 225px
• div＃3 = width: 150px

演示

 .parent { display: flex; flex-wrap: wrap; height: 100px; background-color: red; width: 600px; } .parent > div { flex-basis: 150px; } .child-1 { flex: 0.5; background-color: green; } .child-2 { flex: 0.5; background-color: yellow; } .child-3 { background-color: pink; } 

 <div class="parent"> <div class="child-1">LOREN IPSUM LOREN IPSUM</div> <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div> <div class="child-3"> LOREN IPSUMLOREN IPSUM</div> </div> 

注意：問題的真相是，因為div＃1和＃2具有相同的flex-grow因子，而div＃3的因子為0，所以該值無關緊要。 你可以使用任何數字來代替0.5。 只要它在兩個div中都相同，項目將計算為225px，因為比例將是相同的。

更多信息：

• flex-grow不按預期調整flex項目的大小
• 如何讓flexbox在計算中包含填充？
• flex-basis和width之間有什么區別？

Answer 2

Flex = 0.5 意味着，您有 flex-grow = 0.5、flex-shrink = 1 和 flex-basis = 0，您正在為彈性項目分配可用空間。

假設您有一個寬度為 100vw 的容器（假設 div 元素），其中包含兩個靈活的項目（div 元素），每個 40vw。 所以你的兩個 div 元素消耗的總寬度將等於 80vw，剩余的可用空間將是 20vw。 現在，您已經為兩個 div 元素中的每一個設置了 flex = 0.5。 所以，每個 div 元素都會增長 20vw/2 = 10vw 以完全占據容器的空閑空間。

再考慮一個具有 3 個 div 元素的場景，寬度為 30vw 的 div1，寬度為 10vw 的 div2 和寬度為 25vw 的 div3。 3 個 div 元素消耗的總寬度 = 30 + 10 + 25 = 65vw。 總可用空間 = 100 - 65 = 35vw。

現在，每個 div 元素都設置為 flex = 0.3，所以每個元素都會增長 35/3 =~ 11.66vw