flex弹性布局兼容性讨论

文章分类:设计前沿 发布时间:2015-12-21 原文作者:推我一把 阅读( )

昨天下午在某个js群里面偶然看到一个在讨论css3的flex属性兼容问题,其中有一个人说UC不支持flex,劝大伙进来别用。我看到这里心里就奇怪了,自己做手机H5前端开发虽然不是很久,但是flex还是用过的,没理由不支持的啊。最后我出来反驳(webkit内核都支持),他居然还说UC不是webkit内核的,是U3内核。

    第一、UC是U3内核,也是基于webkit内核

    UC的内核是叫U3,这点没错,但是实际上也是基于webkit来开发的。和国产的360这些浏览器一个本质(不是基于IE就是基于webkit),用的都是人家的内核,只是在别人的内核基础上进行二次开发,加入一堆垃圾和广告而已!就像手机系统一样,主流都是IOS、WP、安卓,像小米和魅族的MIU和FLYME系统,说白了,还不是一个安卓系统,只是做个二次开发,换个皮肤而已。。。。

    第二、UC是支持flex弹性布局的

    在群里有人提出UC不支持flex的谬论,居然没人出来指正,还有几个小白出来应和,气得想开骂了。果断马上做了个demo,放到群反驳。在这过程,我刚好发现了自己的写法在FF下的一个bug,所以在这里分享给大家:

    Flex Demo

    效果可以自己在上面demo测试,下面主要看一下具体代码:

    HTML

        flex box1        flex box2        flex box3        flex box4

    CSS

.nav{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    display: flex;
    overflowhidden;
    width:100%;//火狐不加宽度是无效的
}
.nav a{
    displayblock;
    height:40px;
    line-height40px;
    color:#fff;
    text-aligncenter;
    border:1px solid #fff;
    background#f60;
    text-decorationnone;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
        -o-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

    在写这种css3属性时,为了保险还是尽可能的加上各个浏览器的前缀,因为浏览器巨多,就连chrome(也有不同版本)也不能保证完全支持css3所以属性。这里需要特意提一下的是,在火狐下,弹性布局的父层(也就是上面demo的nav)一定要加宽度才能使弹性布局生效,大伙可以测试验证下。

    这次的感慨是,群大了什么人都有,搞技术这些东西,特别是前端,同一个浏览器,不同版本,不同系统可能效果都不一样,千万不要人说你就信,没事多动动手。自己发表观点时也千万不要说得那么绝对,以免误人子弟啊。以上内容如有错误,欢迎指出交流!

 
原文来自:tui518.com