flex弹性盒子flex-grow 和flex的区别

在flex弹性盒子体系中，flex-grow和flex都有对子元素进行放大的作用，但是这两个属性在放大时的计算方法不同，在使用时候要注意，使用正确的放大属性，从而达到自己想要的效果。

这是一个宽700px的弹性盒子，其中红黄蓝每个子元素的宽度都为100px。我们分别使用flex-grow和flex对子元素进行放大。

使用flex进行放大

使用flex
step1：计算剩余空间，剩余空间为弹性盒子剩余宽度与进行flex的子元素的宽度之和。
例中的剩余空间为：
剩余宽度为400px ，进行flex的子元素宽度分别是100,100，所以剩余空间为600px。
step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为200px,400px。

使用flex-grow进行放大

使用flex-grow
step1：计算剩余空间，剩余空间为弹性盒子剩余宽度
例中的剩余空间为：
剩余宽度为400px
step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为133.34px ,266.66px。
step3：元素自身的宽度加上分配到的剩余空间就是放大后的宽度。因此其最终显示出来宽度分别为233.34px ,366.66px。