弹性布局display:flex

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。

Flex布局是Fiexble Box的缩写 意为弹性布局，任何一个容器都可以设置为弹性布局。

采用弹性布局的元素，称为Flex容器， 他的所有子元素自动为容器成员 称为Flex项目

Flex 默认存在两根轴 主轴和侧轴   

        主轴开始的位置叫做 main start  结束位置叫做  main end  子元素默认主轴排列

容器属性：

      1.  flex-direction:   决定主轴的方向 即 容器中子元素的排列方式

    .box {
          flex-direction: row | row-reverse | column | column-reverse;
    }
   row （默认值）: 主轴为水平方向  从左往右开始
   row-reverse ：主轴为水平方向  从右往左开始
   column ：  主轴为垂直方向   从上往下开始
   column-reverse： 主轴为垂直方向  从下往上开始

      2.  flex-wrap:  默认容器中的子元素排在一行

        .box{flex-wrap: nowrap | wrap | wrap-reverse;}

                nowrap（默认）：不换行。

                wrap：换行，第一行在上方。

                wrap-reverse：换行，第一行在下方。

        3. justify-content属性       

                .box { justify-content: flex-start | flex-end | center | space-between | space-around; }

                flex-start（默认值）：左对齐

                flex-end：右对齐

                center： 居中

                space-between：两端对齐，项目之间的间隔都相等。

                space-around：子元素中间的间距是侧边栏的一倍

     4. align-items属性 :定义子元素在垂直排列时的对齐方式

                .box { align-items: flex-start | flex-end | center | baseline | stretch; }

                flex-start: 从侧轴的上部对齐开始

                flex-end:从侧轴的下边对齐开始

                center; 从侧轴的中间对齐开始

                baseline：跟子元素中文字的最下边对齐

                stretch:如果子元素没有设置高度或者设置为auto，将占满整个高度

       5 align-content属性

              .box { align-content: flex-start | flex-end | center | space-between | space-around |                         stretch; }

               flex-start: 从侧轴的上部对齐开始

                flex-end:从侧轴的下边对齐开始

                center; 从侧轴的中间对齐开始

                space-between：与侧轴的两端对齐，轴线之间平均分布

                space-around：每根轴线之间的间隔相等，所以，轴线之间的间隔比边框大一倍

                stretch（默认值）：轴线占满整个交叉轴。

         6  flex-flow属性： flex-direction和flex-wrap的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式

                默认值是 “nowrap”。 规定灵活项目是否拆行或拆列。