关于在UC中flex的问题

[qq475281441]

博主也是刚刚接触H5，初次接触flex布局，觉得很好用，PC端测试没问题，手机端唯独UC浏览器会出现使用flex布局的地方出现空白的现象（布局并没有乱），就是使用了display：flex的元素直接不见了，折腾了半天也没弄出个所以然。
下面上代码：
html：
<ul class="flex">
<li class="fl flex-ch"><img src="imgs/index/pro_one.jpg" alt=""/><p>¥1499</p><a>6.5折</a></li>
<li class="fl flex-ch"><img src="imgs/index/pro_one.jpg" alt=""/><p>¥1499</p><a>6.5折</a></li>
<li class="fl flex-ch"><img src="imgs/index/pro_one.jpg" alt=""/><p>¥1499</p><a>6.5折</a></li>
</ul>


css：
.flex{display: -webkit-box;display: -moz-box;display: -o-box;display: -ms-flexbox;display: flex;display: block;}
.flex-ch{-moz-box-flex: 1;-webkit-box-flex: 1;-o-box-flex: 1;-ms-flex: 1;flex: 1;}
flex为父元素，flex-ch为子元素。
display：block加上后就能显示元素了，但是我并不懂其中的原理。还望大牛赐教。

[qq475281441]

加block能显示是因为block覆盖了前面的display属性。，谁能告诉我为什么flex在UC上会不显示，是有兼容性问题还是我的代码有问题