css弹性盒子（flex）

flex 是 flexible Box的缩写，意为“弹性布局”

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

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

flex-direction 设置主轴方向

1.主轴与侧轴

        默认主轴方向就是X轴方向，水平向右

        默认侧轴方向就是Y轴方向，水平向下

 2.属性值

        flex-direction属性决定主轴的方向（项目的排列方向）

        注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

        row : 默认值从左到右

        row-reverse : 从右到左

        column：从上到下

        column-reverse：从下到上

justify-content 设置主轴上的子元素排列方式

  属性值

        flex-start：默认值 从头部开始 如果主轴是x轴，则从左到右

        flex-end：从尾部开始排列

        center：在主轴居中对齐（如果主轴是x轴则水平居中）

        space-around：平分剩余空间

        space-between：先两边贴边 在平分剩余空间

flex-wrap 设置子元素是否换行

   属性值

        nowrap：默认值 不换行

        wrap：换行

align-items 设置侧轴上的子元素排列方式（单行）

  属性值

        flex-start：从上到下

        flex-end：从下到上

        center：挤在一起居中（垂直居中）

        stretch：拉伸（默认值）

align-content 设置侧轴上的子元素的排列方式（多行）

   属性值

        flex-start：默认值在侧轴的头部开始

        flex-end：在侧轴的尾部开始排列

        center：在侧轴中间显示

        space-around：子项在侧轴平分剩余空间

        space-between：子项在侧轴先分布在两头，再平分剩余空间

        stretch：设置子项元素高度平分父元素高度

flex-flow 属性是flex-direction和flex-wrap属性的复合属性

        flex-flow：row wrap；

flex属性 定义子项目分配剩余空间 用flex来表示占多少份数

        .item{

                flex：<number>; /* default */

        }

align-self 控制子项自己在侧轴上的排列方式

        

 order 属性定义项目的排列顺序

        数值越小，排解越靠前，默认为0

        注意：和z-index不一样