重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

1、flex，主要就是按比例分配。（例如：两个div的flex:1，就大小相等）

?

1 2 3 4 5 6 7 8

.box1{     flex:1;     background-color: red; } .box2{     flex:1;     background-color: blue; }

2、flex-direction，几种排序的方式。

?

1 2 3 4

row: child水平方向排列 column: child竖直方向排列(默认) row-reverse: child水平方向反向排列 column-reverse: child竖直方向反向排列

3、justify-content，几种横向内容排序的方式。

?

1 2 3 4 5 6

flex-start: child对齐主轴的起点(默认) flex-end: child对齐主轴的终点 center: child居中对齐主轴 space-between: child在主轴方向相邻child等间距对齐，首尾child与父容器对齐 space-around: child在主轴方向相邻child等间距对齐，首尾child与父容器的间距相等且为相邻child间距的一半 space-evenly: child在主轴方向均匀分布。相邻间距与首尾间距相等

4、align-items，几种竖向内容排序的方式。

?

1 2 3 4 5

flex-start: child对齐副轴起点(默认) flex-end: child对齐副轴终点 center: child居中对齐副轴 stretch: child为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴 baseline: 有文本存在时，child在副轴方向基于第一个文本基线对齐

5、flex-wrap，换行与不换行。

?

1 2	nowrap: 不换行(默认) wrap: 自动换行

6、align-self，个别child的特别竖向排序方式。（属性名和align-items一样）