flex

display: flex;

flex-direction属性值

1.  row:flex-direction的默认值，表示伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要主向）。主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。
2.  row-reverse：表示的是除了主轴起点与主轴终点方向交换以外同row属性值的作用。
3.  column：表示的是伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）同向。主轴起点与主轴终点方向分别等同于当前书写模式的前与后方向。简单的可以理解为列布局。
4.  column-reverse：表示的是除了主轴起点与主轴终点方向交换以外同“column”的属性值作用。  

  flex-wrap属性   主要用来控制伸缩容器是单行还是多行

1.  nowrap:flex-wrap的默认值，表示的是伸缩容器为单行。侧轴起点方向等同于当前书写模式的起点或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
2.  wrap：表示的是伸缩容器为多行。侧轴起点方向等同于当前书写模式的起眯或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
3.  wrap-reverse：除了侧轴起点与侧轴终点方向交换以外同wrap所起作用相同。