Flex布局中出现的兼容问题

caniuse

今天在做移动端页面的时候使用flex布局，但是在测试后发现华为P9出现了下图效果

Paste_Image.png

<style>
ul,li,p{padding: 0; margin: 0; list-style: none; }
ul { display:flex;justify-content:space-between; }
ul li {margin: 10px 0; flex:1; text-align: center; }
ul li p {font-size: 20px; color: #666; }
</style>
<ul>
  <li>
    <p>3</p>
    <p>上新商品</p>
  </li>
  <li>
    <p>3</p>
    <p>全部商品</p>
  </li>
  <li>
    <p>3</p>
    <p>收藏人数</p>
  </li>
</ul>

以上就是代码了至于如何使用Flex我就不过多介绍了，可以看阮一峰Flex 布局教程：语法篇

查找了些资料解决了问题，现在将代码附上以免以后在遇到类似的问题，修改后的css

ul {
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center
}
ul li {margin: 10px 0; flex:1;-webkit-box-flex: 1; text-align: center; }
ul li p {font-size: 20px; color: #666; }