首页 > 代码库 > flex兼容性问题

flex兼容性问题

flex于众多手机的兼容方案

  • 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南](https://github.com/postcss/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%;}

    注意:添加前缀并不是万能的,其原因是不能用行内元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%; 且不能使用margin:0 auto;

flex兼容性问题