flex兼容性问题

flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)css

  • 若是项目使用构建工具,可加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;git

相关文章
相关标签/搜索