弹性布局中flex-grow的两种常见应用

需要1:如下图,3个子元素等分占满父元素宽度
在这里插入图片描述
当我们遇到项目个数恰好可以等分时,比如2个或4个项目这种,直接设置项目等分的宽度,但是遇到项目个数不好等分的情况比如3个或者其他未知的个数,我们可以通过给所有的项目都设置flex-grow:1进行等分剩余空间的方法来进行等分

需求2:如下图,两个元素占满整个父元素,并且确定了左边的子元素高宽,右边的不确定宽度
在这里插入图片描述
右边的项目设置flex-grow:1,意思是把剩余空间的分成一等份,都给右边的项目。

flex-grow的等分解释:应用于项目身上,设置了flex-grow的项目都将获得剩余空间的某等分。而获得的等分大小是所有项目的flex-grow的值的总和的占比。比如说有3个项目,第一个设置了flex-grow:1,第二个设置flex-grow:2,第三个不做设置。那就会把剩余空间分成所有flex-grow属性值总和,这里是3份,然后第一个项目就分到1份,第二个项目分到2份。第三个项目没资格分。

猜你喜欢

转载自blog.csdn.net/weixin_44494811/article/details/102855826