flex彈性盒子佈局中，關於flex-grow佈局問題設定
阿新 • • 發佈：2019-02-19
先貼上上一段程式碼，flex總體佈局
二、不單設定flex-grow屬性，設定flex綜合屬性
<body>
<div class="total">
<div class="one">第一個</div>
<div class="two">第二個</div>
<div class="three">第三個</div>
</div>
</body>*{ margin:0; padding: 0; } .one{ background: #f00; } .two{ background: #0f0; height: 30px; } .three{ background: #00f; height: 60px; } .total{ width: 900px; height: 100px; display: flex; display: -webkit-flex; background: #ff0; flex-direction: row; -webkit-flex-direction:row; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:space-between; -webkit-justify-content:space-between; } .total>div{ flex-grow:1; -webkit-flex-grow:1; } .total>.two{ flex-grow:2; -webkit-flex-grow:2; }
第二個div設定flex-grow為2，另外兩個均為1.
實際效果第二個div並沒有是其他兩個div的寬度的二倍，似乎是不到二倍，但確實是比另外兩個要大，這是為什麼呢？
後來經過一番折騰終於搞明白了，是自己的理解有誤，參考於阮一峰先生的相關文章，連結在這裡flex佈局教程。
自己總結了三個解決辦法：
一、結合flex-basis
將整體div樣式進行修改，加入flex-basis屬性
設定專案固定空間均為0；.total>div{ flex-grow:1; -webkit-flex-grow:1; flex-basis:0; -webkit-flex-basis:0; }
二、不單設定flex-grow屬性，設定flex綜合屬性
這一點在阮一峰文章中有提到，建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
單單設定flex-grow的數值時，因為這時flex-basis的值為auto，專案佔據了相應的固定空間，導致設定錯誤。
.total>div{
flex:1;
}
.total>.two{
flex:2;
}這種方法是使div中不含有固定寬度，設定二倍不成功的根本原因就在這兒，因為div中的文字佔有固定寬度，我們都知道flex-grow設定的是剩餘空間的大小分配，而剩餘空間就是去掉文字之後的空間，大家可以自己計算一下，為什麼不是我們想要的二倍，去掉div中的文字，就相當於去掉了固定空間，如下
<body>
<div class="total">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body> .total>div{
flex-grow:1;
-webkit-flex-grow:1;
}
.total>.two{
flex-grow:2;
-webkit-flex-grow:2;
}其實，這三種方法的原理實際上是一樣的，都是使固定空間為0，切記flex-grow設定的是剩餘空間的分配比例，分配之前一定要先除去實際固定空間在進行計算。
第一次發部落格，不足之處望讀者多多指教！