flex布局

1 display:flex;  使用flex布局

2 flex-direction:  row  |  row-reverse  |  column  |  column-reverse ;    

   元素排列方向  :  从左向右（默认）|  从右向左  |  从上往下  |  从下往上  ；

3 flex-wrap :  nowrap  |  wrap  |  wrap-reverse  ;

   是否换行 ：不换行（默认）|  换行，往下换行  |   换行，往上换行 ；

4  justify-content: 水平对齐方式

        flex-start     左对齐

11111111

22222

3333333333333

        flex-end    右对齐

11111111

22222

3333333333333

       center   居中

11111111

22222

3333333333333

       space-around 

11111111

22222

3333333333333

        space-between

11111111

22222

3333333333333

5  align-items: 垂直对齐方式

stretch(默认)  |  flex-start  |  flex-end  |  center  |  baseline