布局的动态适配

  display: flex

  作用：快速让页面实现居中对齐的（浏览器自动帮我们对齐）

  总共13个css属性

  display: flex  开启弹性盒子
  注意：1 在你想设置对齐子元素的最近的那个父元素上开启
        2 父元素如果开启弹性盒子，那么子元素的float、clear和vertical-align将失效
        3 父元素如果开启了弹性盒子，子元素如果没有设置高度，那么子元素的高度默认继承父元素


  6个应用在父元素上的
      align-items: center;  设置Y轴对齐的
      justify-content: space-between;  设置X轴对齐的
      flex-wrap: wrap;  设置一行放不下的时候，是否换行（注意：需要手动指定一行放多少个）
      flex-direction  设置元素的排列方向（默认是row 横放）
        注意：如果设置了 column
              那么 align-items 和 justify-content 作用将相互颠倒
      align-content 如果有多行子元素，那么使用这个属性进行对齐        


  6个应用在子元素上的  
      order  设置子元素的排列顺序，数值越小越靠前
      flex-shrink: 0;  让子元素在空间不足的时候不缩小
         一般实现横向滑动
      flex-grow  定义子元素的放大比例
      flex 是 flex-grow      flex-shrink  flex-basis 的简写

        flex: 1; 代指： flex-grow: 1