文章摘要:flex:1、flex:auto (1 1 auto) 和 flex:none (0 0 auto)三者都是什么意思?有什么不同?
在使用Flex 布局的时候会用到flex属性,比较常见的设置有flex:1、flex:auto (1 1 auto) 和 flex:none (0 0 auto)三种,他们都是什么意思?有什么不同呢?今天织梦模板社小编就给大家介绍下他们的用途及其区别。
首先flex属性是flex-grow, flex-shrink 和 flex-basis的简写,所以其取值可以参考以下几种情况:
1、flex默认值为0 1 auto。
2、当flex取值为none,则计算值为0 0 auto,如下是等同的:
- .item{flex:none;}
- //等同
- .item{flex-grow:0;flex-shrink:0; flex-basis:auto}
3、当flex取值为auto,则计算值为1 1 auto,如下是等同的:
- .item{flex:auto;}
- //等同
- .item{flex-grow:1;flex-shrink:1; flex-basis:auto}
4、当flex取值为一个非负数字,则该数字为flex-grow值,flex-shrink取1,flex-basis:0%,如下是等同的:
- .item{flex:1;}
- //等同
- .item{flex-grow:1;flex-shrink:1; flex-basis:0%}
5、当flex取值为一个长度或者百分比,则该数字为flex-basis的值,flex-grow取1,flex-shrink取1,如下是等同的:
- .item{flex:0%;}
- //等同
- .item{flex-grow:1;flex-shrink:1; flex-basis:0%}
- .item{flex:24px;}
- //等同
- .item{flex-grow:1;flex-shrink:1; flex-basis:24px}
6、当flex取值为两个非负数,则该数字为flex-grow和flex-shrink的值,flex-basis取0%,如下是等同的:
- .item{flex:2 3;}
- //等同
- .item{flex-grow:2;flex-shrink:3; flex-basis:0%}
7、当flex取值为一个非负数和一个长度或百分比,则该数字为lex-grow和flex-basis的值,flex-shrink取1,如下是等同的:
- .item{flex:200 30px;}
- //等同
- .item{flex-grow:200;flex-shrink:1; flex-basis:20px}
以上就是flex取值常见写法。掌握以上方法就可以在项目里灵活运用,实现所需的网站页面布局了。