伸缩性flex

用来控制伸缩容器额外空间如何沿着伸缩容器的布局轴成比例的分配给各个伸缩项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
flex: none;
等价于
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

flex: 0 auto;
或者
flex: 0 1 auto;
或者
flex: initail;
等价于(也就是说他们单属性的默认值值分别是)
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
1
2
3
4
5
flex: auto;
等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
1
2
3
4
5
flex: 1;
等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
1
2
3
4
5
6
flex: 2 100px;
等价于
flex-grow: 2;
flex-shrink: 1;
flex-basis: 100px;
`