flex 是 flex-grow, flex-shrink 和 flex-basis的简写。

除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：

• 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

复制
1.item {flex: 1;}
2.item {
3    flex-grow: 1;
4    flex-shrink: 1;
5    flex-basis: 0%;
6}

• 当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

复制
1.item {flex: 0;}
2.item {
3    flex-grow: 0;
4    flex-shrink: 1;
5    flex-basis: 0%;
6}

• 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

复制
1.item-1 {flex: 0%;}
2.item-1 {
3    flex-grow: 1;
4    flex-shrink: 1;
5    flex-basis: 0%;
6}
7
8.item-2 {flex: 24px;}
9.item-2 {
10    flex-grow: 1;
11    flex-shrink: 1;
12    flex-basis: 24px;
13}

• 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

复制
1.item {flex: 2 3;}
2.item {
3    flex-grow: 2;
4    flex-shrink: 3;
5    flex-basis: 0%;
6}

• 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}