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;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有