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

悠悠 2023-10-06 16:19 21阅读 0赞

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

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

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

![e3db7d170865e5fd8ada5214f4108441.png][]

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

![70d269f3b1fa945a4fa2e11bbf17ddda.png][]

![5f17b57521ac3281f922406f86895f82.png][]

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

![fffd69cdc3c5f06f0b7d04a67df1a10b.png][]

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

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

![d3c3674661050f121b60154519e6c787.png][]

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

![560a513d134c909745e6af6bfd4c7827.png][]

### 总结： ###

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

[e3db7d170865e5fd8ada5214f4108441.png]: https://img-blog.csdnimg.cn/img_convert/e3db7d170865e5fd8ada5214f4108441.png
[70d269f3b1fa945a4fa2e11bbf17ddda.png]: https://img-blog.csdnimg.cn/img_convert/70d269f3b1fa945a4fa2e11bbf17ddda.png
[5f17b57521ac3281f922406f86895f82.png]: https://img-blog.csdnimg.cn/img_convert/5f17b57521ac3281f922406f86895f82.png
[fffd69cdc3c5f06f0b7d04a67df1a10b.png]: https://img-blog.csdnimg.cn/img_convert/fffd69cdc3c5f06f0b7d04a67df1a10b.png
[d3c3674661050f121b60154519e6c787.png]: https://img-blog.csdnimg.cn/img_convert/d3c3674661050f121b60154519e6c787.png
[560a513d134c909745e6af6bfd4c7827.png]: https://img-blog.csdnimg.cn/img_convert/560a513d134c909745e6af6bfd4c7827.png