本文轉載自：https://blog.csdn.net/sinat_41695090/article/details/79215893
先粘貼上一段代碼，flex總體布局
<body> <div class="total"> <div class="one">第一個</div> <div class="two">第二個</div> <div class="three">第三個</div> </div> </body>
css樣式
*{ 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屬性
.total>div{ flex-grow:1; -webkit-flex-grow:1; flex-basis:0; -webkit-flex-basis:0; }
設置項目固定空間均為0；
二、不單設置flex-grow屬性，設置flex綜合屬性
這一點在阮一峰老師文章中有提到，建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
單單設置flex-grow的數值時，因為這時flex-basis的值為auto，項目占據了相應的固定空間，導致設置錯誤。
.total>div{ flex:1; } .total>.two{ flex:2; }
三、去掉div文本內容
這種方法是使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設置的是剩余空間的分配比例，分配之前一定要先除去實際固定空間在進行計算。