flex简写 — flex:1 与 flex:2 指什么

在移动端开发过程中，经常看到flex:1 与 flex:2 这到底指的什么意思？


flex : CSS 简写属性，分别指 ：增大或缩小以适应其弹性容器中可用的空间

flex: flex-grow flex-shrink flex-basis ;


假设 ：写成 flex : 0 1 auto ; 这样写，你一定能明白；
但很多时候，在项目应用中，写的更为简洁；如:flex:1 , flex:2  ,  flex:30px , flex: 1 30px;  通常就不是很清楚了；


这个时候，就需要我们更为细致的去了解官方的说明文档（通常容易忽视）


语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值，无单位数字：flex-grow */
flex: 2;
/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值：flex-grow | flex-basis */
flex: 1 30px;
/* 两个值：flex-grow | flex-shrink */
flex: 2 2;
/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

官方说明如下：


可以使用一个，两个或三个值来指定 flex属性。


单值语法: 值必须为以下其中之一：


一个无单位数 (<number>): 它会被当作flex:<number> 1 0; <flex-shrink>的值被假定为 1，然后<flex-basis> 的值被假定为0。

一个有效的宽度 (width)值：它会被当作 <flex-basis>的值。



关键字none，auto或initial.



 双值语法:
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。


第二个值必须为以下之一：

一个无单位数：它会被当作 <flex-shrink> 的值。
一个有效的宽度值：它会被当作 <flex-basis> 的值。



 三值语法：


第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。


 取值

initial 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。

 auto 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

 none 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。