flex布局小结

  操作方便，布局极为简单，可以自适应屏幕的大小 移动端用的比较多，PC端浏览器支持情况较差
  任何一个容器都可指定为flex布局
  给父元素设置display：flex 从而控制孩子的摆放
父亲常见属性：
    flex-direction设置主轴的方向，元素是跟着主轴排列的
     默认 row从左到右   
     row-reverse  倒叙
     cllumn  从上到下
  justify-content 设置主轴上的子元素排列方式：
     flex-start 默认从头部开始
     flex-end   从尾部开始
     center       居中对齐
     space-around  平分剩余空间
     space-between  先两边贴边，在分配剩余的空间
  flex-wrap 设置子元素是否换行  
  默认子元素不换行flex-wrap：nowrap  如果装不下会缩小子元素的宽度，放到父元素里边
   flex-wrap：wrap 换行
   align-items 单行 设置侧轴上的子元素排列方式
     flex-start 默认从头部开始
     flex-end   从尾部开始
     center       居中对齐
     align-items:stretch 拉伸  但不能设置高度
     align-content 多行 侧轴元素的对齐方式
  flax-flow 是flex-direction flex-wrap 复合属性
子项属性 ：
   flex属性  定义子项目分配剩余空间，用flex表示占多少分数
    子元素不设置宽度
    flex：num
    align-self 控制子项自己在侧轴的排列方式
    order 定义项目的排列顺序 数值越小，排名越靠前