响应式-流布局

伸缩盒子新-流布局
  1.display：flex开启流布局   
  2.flex-grow   扩展比率 按份数分配，默认为0
  3.flex-shrink 收缩比率 默认为1
  4.flex-basis  伸缩基准值 可扩展可收缩，按份数和像素都可  默认为1
  5.flex-flow   排列方式
  （1）flex-diection 位置
    row从左到右布局      row-reverse从右到左布局 
    column从上到下布局   column-reverse从下到上布局
  （2）flex-wrap 是否换行
    nowwrap 不换行       wrap溢出换行      wrap-reverse 反转换行
  6.order 设置顺序
    单位：数字，默认为1，数字越大越靠前
  7.align-content堆叠伸缩行的对齐方式
    flex-start   顶端对齐   flex-end 底端对齐     center居中
    space-around 平均分布   stretch  沾满父类
  8.align-items 在侧轴（纵轴）方向上的对齐方式
    flex-start   顶端对齐   flex-end 底端对齐     center居中
    baseline       基线     stretch  沾满父类
  9.align-self 在侧轴（纵轴）方向上的对齐方式
    flex-start   顶端对齐   flex-end 底端对齐     center居中
    baseline       基线     stretch  沾满父类     auto 自适应
 10.justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
    flex-start   顶端对齐   flex-end 底端对齐     center居中
    space-around 平均分布   space-between 两端对齐
    注意两个横纵轴区别：
                 7.8 横轴纵轴参考父类，支持换行的水平垂直居中
                 9.10横轴纵轴参考父类和兄弟，不支持换行的水平垂直居中
流布局默认值
       flex:1;    表示的是flex:1 1 0%;   [伸为1收为1 基准值为0]
       flex:none；表示的是flex:0 0 auto; [不伸也不缩 按照原来宽高去适应父类]
       flex:auto；表示的是flex:1 1 auto; [伸为1收为1 基准值按照原来宽高去适应父类]
       flex:10%;  表示的是flex:1 1 10%;  [伸为1收为1 基准值：超出面积按10%往回缩；比父类面积小按10%伸]