flex布局

        flex布局容器

flex属性

                flex-direction flex项目的排列方向  row column row-reverse  column-reverse

                flex-wrap  flex项目是否换行   wrap nowrap  wrap-reverse

    flex-flow :flex-direction flex-wrap    

               justify-content:   flex项目在主轴上的对齐方式    flex-start flex-end center space-between space-around 

               align-items: flex-start flex-end center stretch baseline flex项目在侧轴上的对齐方式

               align-content flex多行项目在侧轴的对齐方式

   对齐属性

      order ：   排序属性。可规定flex项目的排列顺序

     flex-grow   :   flex项目在多余容器的放大扩展

     flex-shrink: flex项目在额外空间的缩小

    flex-basis:    flex项目的初始大小；

    flex: flex-grow flex-shrink  flex-basis;

   flex:2   //表示flex项目的初始宽度为0，伸展项目可以填满空间。并且它决定了项目变宽的程度