flex弹性盒子中flex-grow与flex的区别

flex弹性盒子中flex-grow与flex的区别

大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性， flex-grow 属性用于设置父元素剩余空间的瓜分比例， flex 属性是 flex-grow、flex-shrink 和flex-basis 属性的简写属性 ，通常我们认为flex-grow:1;与flex:1;是同一个意思，就是将子元素瓜分父容器的剩余空间1份。

但你是不是在实践中发现了二者的一点区别呢？

如下：这是一个宽700px的弹性盒子，其中红绿蓝每个子元素的宽度都为100px。

我们分别使用flex-grow和flex对子元素进行放大。

可以看出，以上得到的是不同的结果。

我们接下来用动图来演示：

1、第一个是使用flex-grow进行空间的分配

2、第二个是使用flex进行空间的分配

总结：

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