属性：

  1：父元素

     【常用】display: flex  表示开启弹性盒子
     【常用】align-items: center; 垂直对齐方式
     【常用】justify-content: space-around;   水平对齐方式
     【常用】flex-direction: row;   设置元素的排列方式，x ， y
     【常用】flex-wrap: wrap;     设置元素一行排不下的时候是否换行

     align-content 定义多根轴线的时候（Y）对齐方式

  

  2：子元素（flex-grow【wiedth,margin】，align-self【定位】）

  order: 设置元素的位置，数值越小越靠前
  flex-grow: 35; 设置元素的所占空间的比例（放大） 数值越大，元素所占空间越大
  flex-shrink：设置元素的所占空间的比例（缩小） 数值越大，元素所占空间越大
  flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  flex： flex-grow, flex-shrink 和 flex-basis
  align-self: flex-end; 设置某个子元素和整体不一样的对齐方式


  rem：

   基准值  * 你设置的数值(rem) =  最终网页的尺寸
   100px(html)   * 2rem   ==  28px

   37.5px   *   2rem == 75px
    

   1：媒体查询

   2: js获取当前屏幕的 dpi，然后根据dpi动态的计算出 基准值，然后修改html的font-size