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