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; }
