flex布局

 flex布局是有主轴和交叉轴之分的，一横一竖，纵横页面。

1.主轴是横还是竖呢？

　　flex-direction决定

　　row(水平)column(竖向)     加reverse决定从下到上，还是从右到左

　　交叉轴视主轴方向决定

2.盒子的主轴排布

　　jusitfy-content决定

　　center(中间)

　　flex-start / flex-end

　　space-between / space-around

3. 盒子的交叉轴排布

　　align-item

　　用交叉轴定位，需要先定好父盒子的高度。

　　center(中间)

　　flex-start / flex-end

　　baseline

　3.1 align-self定义的是单独的属性，用以覆盖align-item

4.order

　　控制排序的先后顺序。