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;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM