css中flex-shrink布局属相，flex-grow的作用[css3教程]

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

在CSS中，flex-shrink是用于弹性盒子（flexbox）布局的属性之一，它定义了弹性元素在空间不足时如何缩小。而flex-grow则用于定义弹性元素在容器中剩余空间分配时的增长比例。

具体来说，flex-shrink属性控制弹性元素在空间不足时是否允许缩小以及缩小的程度。它接受一个非负数作为值，值越大表示元素被允许缩小的程度越大。默认情况下，flex-shrink的值为1，表示元素将根据需要等比例缩小。

例如，如果一个容器中有两个弹性元素，并且设置了各自的flex-shrink属性值，那么当容器空间不足时，元素会按照各自的缩小比例进行调整，以适应容器的大小。

而flex-grow则定义了弹性元素在容器中剩余空间分配时的增长比例。它也接受一个非负数作为值，值越大表示元素获得的剩余空间越多。默认情况下，flex-grow的值为，表示元素不会分得剩余空间。

例如，如果一个容器中有两个弹性元素，并且只有一个元素设置了flex-grow属性为1，那么当容器有剩余空间时，该元素会优先获得分配空间，而另一个没有设置flex-grow属性的元素则不会增长。

总结起来，flex-shrink用于定义元素在空间不足时的缩小比例，而flex-grow用于定义元素在容器有剩余空间时的增长比例。这两个属性可以结合使用，灵活控制弹性盒子布局中元素的大小和分布。

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

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

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

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

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

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

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

关注本站更多学习内容请收藏本站或保存本站永久网址[www.axue5.com]每天更新学习资源和各种,破解软件,福利美图技术教程,线报活动等网络资源！