flex盒子六大属性

1. Flex英文翻译为: Flexable Box的缩写。旨在为盒状模型提供最大的灵活性。

                                    任何容器都可以指定为Flex布局

     2. 作用在box容器的六大CSS属性（为了控制子元素的显示方式）

         flex-direction ————决定flex-items的整体排布方向（横排，竖排，竖排反响，横排反向）

         flex-wrap——————决定flex-items行排满后，是否换行以及怎样换行

         justify-content————flex-items整体在flex-direction指定方向进行调整

        align-content—————同justify-content一样，作用方向相反(不常用)

        align-items——————对flex-item的flex-direction指定方向的垂直方向 进行上下或居中

        注释：区分align-content   align-items  

                   align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果

     2.1 flex-direction ————决定flex-items的整体排布方向（横排，竖排，竖排反响，横排反向）

           row ： flex-items整体横向排布
           row-reverse ：flex-items整体横向排布，但items反转，如“123”横向排布变为“321”
           column ： flex-items整体竖向排布
           column-reverse ： flex-items整体竖向排布，但items反转

      2.2 flex-wrap—————决定flex-items行排满后，是否换行以及怎样换行

            

            no-wrap : 不换行（一行满了也不换）

            wrap ： 换行（一行满了换到下一行）

            wrap-reverse ： 换行反转，也就是第一行满了后。第一行与第二行位置反转。

      2.3  flex-flow是flex-direction与flex-wrap结合体

             flex-flow: row; no-wrap;

      2.4   justify-content  为flex-direction指定方向进行调整

              flex-start——flex-end——center——space-between——space-around

              

       2.5  align-content 同justify-content一样，作用方向相反

       2.6  align-items 对flex-item的flex-direction指定方向的垂直方向 进行上下或居中

               flex-start——flex-end——center