flex-wrap兼容性问题

Question

测试发现在魅族mx5自带浏览器上兼容flex布局，但是不兼容flex-wrap这个属性，
测试环境：mx5，android-5.1，flyme-6.2.0.0A;
发现华为GRA-TL00安卓5.0.1也不行；
caniuse安卓4.4就支持无前缀flex，问题在于不支持flex-wrap;
请问有什么解决方案吗？

更新：
前面表述有误，不算是不支持flex-wrap，应该是表现有差异。
具体测试如下：
css:

    .box {
        display: flex;
        flex-wrap: wrap;
        width: 200px;
        background: gray;
        color: #fff;
    }

    .item1 {
        flex: 1;
        height: 30px;
        background: blue;
    }

    .item2 {
        flex: 1;
        height: 50px;
        background: red;
    }

html:

    <div class="box">
        <div class="item1">
            <div style="width: 120px;">1</div>
        </div>
        <div class="item2">
            <div style="width: 120px;">2</div>
        </div>
    </div>

图片：

Answer 1

flex有版本兼容，需要根据浏览器的版本做兼容
.flex-hw {

/* 09版 */  
/*-webkit-box-lines: multiple;*/  
/* 12版 */  
-webkit-flex-wrap: wrap;  
-moz-flex-wrap: wrap;  
-ms-flex-wrap: wrap;  
-o-flex-wrap: wrap;  
flex-wrap: wrap;  

}

Answer 2

一般这种兼容性问题，我都是先上 autoprefixer， 如果解决不了，就降级到其他样式方案

Answer 3

安卓4.4以下确实不支持flex-wrap。我的做法：

1. 一般固定列数布局，可以改下dom结构

   <div class="row">
     <div class="item"></div>
     <div class="item"></div>
   </div>
   <div class="row">
     <div class="item"></div>
     <div class="item"></div>
   </div>

   使用lodash的chunk方法把数组等分

2. 不固定列数

   使用inline-block

Answer 4

我也遇见这个问题了，我感觉在这个问题上更改为楼上那种dom结构比较合理。因为我做的是自适应页面，每一行的数量是不一样的，所以我更改为float的方案了。