flex自定义排序（flex取值1autonone什么意思）

在使用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取值为两个非负数,则该数字为lex-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取值常见写法。掌握以上方法就可以在项目里灵活运用，实现所需的网站页面布局了。