首页 > 其他 > 详细

flex兼容性问题

时间:2017-05-25 22:48:29      阅读:336      评论:0      收藏:0      [点我收藏+]

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兼容性问题

原文:http://www.cnblogs.com/summer-2014/p/6906193.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!