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

Question

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

<ul>
    <li></li>
</ul>

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>
    <p></p>
    <ul>
        <li></li>
    <ul/>
</div>

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;
}

请大家帮忙看看？

Answer 1

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

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

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

Answer 2

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

Answer 3

为了解决flex的兼容性问题，以及快速上手，我开发了flex.css。目前已经在众多项目中使用，楼主可以试试，兼容微信和UC：https://github.com/lzxb/flex.css

Answer 4

给的链接https://github.com/lzxb/flex已经不存在了啊