浅谈flex布局中,项目中flex属性的应用!

平时在项目布局中总会遇到flex布局,常用的有flex:1 1 auto (用来补全剩余的空间),那么flex其他的应用呢?

一、首先,先明白flex: 参数1 参数2 参数3代表的函数

参数1代表定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

参数2代表属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

参数3属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

二、用来进行等比分配空间

 

 小结:

1、flex:1 1 auto ; 用来补全剩余空间

2、项目中依次给设置flex:1 ; flex:2; flex:3; 用来给项目进行按比例1:2:3分配空间大小。

3、flex:0 0 auto;  用来保持元素本身的大小,不扩大也不缩小。

猜你喜欢

转载自www.cnblogs.com/teamemory/p/12119798.html
今日推荐