flex-grow是如何运作的

1.首先看看flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

默认:


.cla1{flex-grow:0.5;}


.cla1{flex-grow:1;} //在这里grow大于1之后无论怎么增加都不会发生变化.

.cla1{flex-grow:0.4;}
.cla2{flex-grow:0.4;} //这里还剩余有空间。


从上的几个例子不难看出flex-grow这个属性的最大值应该是1;如果在同一主轴的项目中有出现flex-grow,其和下于1则像上述例子中0.4+0.4分配了80%;如果超出了1;则会按照各自的比例来分配空间:

.cla1{flex-grow:10;}
.cla2{flex-grow:5;} 



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭