flex-grow的坑

前段时间在使用flex布局进行宽度处理的时候，发现flex-grow并没有按照预期的比例进行处理，感觉有点迷茫。在stackoverflow上一搜，终于弄明白了其中的奥秘。话不多说，直接上代码：.flex-container{display:flex;宽度:100%;}.flex-item{flex-grow:1;list-style-type:none;}.big{flex-grow:3;}理论上应该小三倍但实际上并不是这样这个属性的解释可以参考阮一峰的flex教程：flex-grow属性定义item的放大比例，默认为0，即如果有剩余空间，则不放大如果所有item的flex-grow属性都为1，则平分剩余空间（如果有的话）).如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。按照正常理解，我们的代码是没有问题的。为什么比例不是设定的？重点来了，这里剩下的空间才是关键。对于一个flex-item，它的初始空间不是0，而是另一个属性值auto（元素内容占用的空间）。这就导致设置flex-grow的效果不是等比例分割整个宽度，而是按比例分割被移除内容的宽度。而如果我们想要达到我们真正想要的效果，就需要使用flex属性来代替原来的。因为根据MDN文档的描述，我们知道flex规定了弹性元素如何被拉伸或缩短以适应flex容器中的可用空间。这是一个简写属性，可以同时设置flex-grow、flex-shrink和flex-basis。这样，当我们在使用flex时只指定一个数字（width值会转换成flex-basis），flex-basis会自动转换成0%，而数字只是转换成比例设置（弹性增长值）。所以修改css代码如下：.flex-item{flex:1;}.big{flex:3;}这样设置的比例就按照我们想要的显示了。ps.stackoverflow原题链接