本文转载自：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设置的是剩余空间的分配比例，分配之前一定要先除去实际固定空间在进行计算。