陈旭阳

探索未知,寻找世界

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;} 



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

flex-grow

flex-grow

qq_31070475 qq_31070475

2017-01-17 22:01:16

阅读数:430

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

不良信息举报

flex-grow是如何运作的

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭