弹性盒子

  主要用来实现布局的兼容

13个css属性

display: flex  开启弹性盒子  加载父元素上

父元素上6个：
justify-content：设置元素在X轴上的对齐方式 
                space-between space-around center
align-items: 设置单根轴线(x轴) 元素在Y轴上的对齐方式    
                center  
             多根  align-content 

flex-wrap: wrap;  一行放不下的时候，进行换行
flex-direction 设置元素排列方向，
               如果设置column，justify-content 和 align-items 作用交换

 flex-flow: 是 <flex-direction> || <flex-wrap> 简写



子元素上6个：

flex-grow 设置元素所占的空间比例（放大）
flex-shrink 设置为0，表示不挤压元素的空间，一般做横向滑动配合overflow-x

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
     一般都写一个属性，即表示 flex-grow


align-self 允许某个元素 不遵守父元素上的 align-items 规则
order  设置元素的位置，数值越小越靠前

尺寸兼容
  
  rem
                    html上的font-size 16px
  你写的单位rem  *   基准数值   =  真实的尺寸


  1: 媒体查询
  2: js 实现