flex布局属性

迅速看懂flex布局

首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (换行)
nowrap, wrap, wrap-reverse
flex-flow (以上两者的简写)
flex-direction || flex-wrap
justify-content (水平对齐方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直对齐方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直对齐方式)
stretch, flex-start, flex-end, center, space-between, space-around1

1.flex-direction
row (从左往右)默认
row-reverse (从右往左)
column (从上往下)
column-reverse (从下往上)

2.flex-wrap
nowrap (不换行)默认
wrap (换行，且往下一行换)
wrap-reverse (换行，且往上一行换)

3.flex-flow，是flex-direction和flex-wrap的简写形式。

4.justify-content
flex-start
flex-end
center
space-between
space-around

5.align-items
stretch 默认
flex-start
flex-end
center
baseline 项目第一行文字的基准线对齐

6.align-content
stretch 默认
flex-start
flex-end
center
space-between
space-around

7.flex-grow

定义了放大比例，默认为0，即如果存在剩余空间，也不会放大。但是，如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有的话），如果其中一个为2，则他是其他项目的2倍宽度。

8.flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果有一个项目的flex-shrink为0，其他都为1，空间不足时，前者不缩小。

9.align-self，定义项目自己的对齐方式