html垂直居中，水平居中，水平垂直居中 flex布局

body{

  display: flex;
   display: -webkit-flex；

flex-direction:  row  column  column-reverse  row-reverse   /*调节布局元素的方向*/

flex-wrap: nowrap  wrap  wrap-reverse  /*换行属性*/

justify-content: /*水平居中*/

flex-start(默认) ：左对齐       flex-end：右对齐     center：居中     space-between：两端对齐，项目之间的间隔都相等    space-around：每个项目两侧的间隔相等         

align-items：/*垂直居中*/      

flex-start：交叉轴的起点对齐   flex-end：交叉轴的终点对齐    center：交叉轴的中点对齐。baseline：项目的第一行文字的基线对齐。     stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

}

容器内单个元素属性

item{

flex-grow:     该属性主要用来定义元素的放大比例，它的默认值是 1。

flex-shrink:   该属性主要用来定义元素的缩小比例，默认值为 1。

flex-basis:    浏览器会根据该属性进行对主轴计算是否有多余的空间。默认值为 auto

flex :             该属性是以上三个属性的缩写形式，默认值为0 1 auto。

                  两个其他的快捷属性，auto（1 1 auto） 和none（0 0 auto）

}

body{

    display: flex;
    display: -webkit-flex; 

 justify-content: center;

   /*//使子项目水平居中*/
    align-items: center;

        调节布局元素的方向
      flex-direction:                    column;//纵向排列(垂直)     column-reverse 垂直反向排列            row;//横向排列（水平）   

     
 flex-wrap:   换行属性     nowrap | wrap | wrap-reverse

nowrap不换行

(2)wrap换行

(3)wrap-reverse换到第一行

}