使用css3 flex布局在手机uc浏览器中一塌糊涂？

关于网友提出的“使用css3 flex布局在手机uc浏览器中一塌糊涂？
”问题疑问，本网通过在网上对“使用css3 flex布局在手机uc浏览器中一塌糊涂？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题：使用css3 flex布局在手机uc浏览器中一塌糊涂？
描述:

看了一篇flex的文章如获至宝，然后运用到项目中。
测试的时候别人的的手机都没有问题，但我手机用uc打开之后布局就没有起作用，不知是uc不支持
display：flex吗？那打击也太大了，代码如下

    



ul{
    display: flex;
    display: -webkit-flex;
    width: 97.5%;
    margin: 12px auto 0;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
li{
    width: 49%;
    position: relative;
    margin-bottom: 7px;
}

还有这个是嵌套的flex布局

    

    

        

    



div{
    width: 97%;
    margin: 15px auto;
    display: flex;
    display: -webkit-flex;
}
div p{
    font-size: 1.8rem;
    color: #fff;
    padding: 12px 8px;
    background-color: #0e67ba;
}
div ul{
    display: flex;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: #e0e0e0;
}
div ul li{
    width: 25%;
    font-size: 1.4rem;
    color: #000;
    text-align: center;
}

请大家帮忙看看？

---

解决方案1:

其实用table cell 也是一样的好用。支持的更好。

解决方案2:

首先所有 webkit 内核的浏览器（包括移动端）都支持 flex 布局，只不过一些浏览器只支持旧语法，如：display: -webkit-box 这样。我估计 UC 支持的是旧语法。

旧语法和标准的 flex 语法有较大区别，需要做好兼容。不过好消息是，你可以来使用 Autoprefixer 来自动处理这些兼容性问题，而你只需要写标准的语法就好了。

以我的个人经验来讲，旧语法中除了没有 flex-wrap 对应的属性外，其他的都可以找到对应的表示方法。

以上介绍了“使用css3 flex布局在手机uc浏览器中一塌糊涂？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/1063558.html