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都有对子元素进行放大的作用，但是这两个属性在放大时的计算方法不同，在使用时候要注意，使用正确的放大属性，从而达到自己想要的效果。

​