Flex布局中出现的兼容问题

caniuse

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

Paste_Image.png

  

    
3
    
上新商品
  
  

    
3
    
全部商品
  
  

    
3
    
收藏人数
  

以上就是代码了至于如何使用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; }