flex兼容性問題

flex在衆多手機瀏覽器上的兼容方案(親測華爲手機自帶瀏覽器)

• 若是項目使用構建工具，可加autoprefixer來處理，[autoprefixer使用指南]
• 純手寫css兼容代碼，需給每一個使用的屬性加上屬性前綴

  /*display: flex;寫法*/
  span {
     display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  }
  /*justify-content: center*/
  span {
      -webkit-box-pack: center;
       -ms-flex-pack: center;
      justify-content: center;
  }
  /*align-items: center*/
  span {
      -webkit-box-align: center;
       -ms-flex-align: center;
      align-items: center;
  }
  /*flex: 1*/
  span {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0%;
  }

  注意：給flex添加前綴並非萬能的，其緣由是不能用行內元素，要改爲block才能更好的支持flex，當元素使用flex:1時，要增長width:0%; 且不能使用margin:0 auto;