x5浏览器 是否有flex兼容性写法

Question

最近在移动端做三栏布局遇到了问题，如何将父容器均分三份给三个子容器？
预期效果如图：

代码如下：

<ul class="tabs">
    <li class="active">全部订单<span></span></li>
    <li>未确认<span></span></li>
    <li>待收货</li>
</ul>

    .tabs{
    margin: 0.75rem 1rem 0.75rem 1rem;
    border: 1px solid #009BE1;
    border-radius: 5px;
    overflow: hidden;
    font-size: 0;
    height: 1.75rem;
    display: flex;
}
.tabs li{
    width: 33.33333%;
    flex: 1;
    display: inline-block;
    line-height: 1.75rem;
    text-align: center;
    color:#009BE1;
    font-size: 0.8rem;
    height: 100%;
}


如果用flex自然没有问题，但是微信浏览器目前还不支持flex,所以我前面设置了width:33.3333%;
但这样设置的问题是最右边按钮与父容器之间会有间隙，因为三个子元素宽度加起来不到100%，会比较难看：

我把容器宽度设为width: 14rem;
子元素宽度设为width: 4.66666rem;
这样在360宽的手机上没有空隙了，但是在米note 393px宽的屏幕上还是有空隙

Answer 1

首先，X5 是支持 flex 布局的，具体是支持旧语法还是新语法我就不太确定了。

推荐你使用 Autoprefixer 来处理 CSS 代码，自动添加前缀，兼容 flex 新旧两种语法，你只需要写标准的 flex 代码就好了。像你上面这种需求，用 flex 处理起来没有任何问题，还是去排查一下 flex 相关的代码吧。

Demo 点这里

Answer 2

把宽度小数点后调大一点。。

Answer 3

我遇到这个问题，flex 新旧写法都不行。

最终尝试添加 “display: block;” 才解决。

因为我的 flex item 是行内元素，本身是块级元素的就不会出现这个问题了。