flex-wrap属性在某些手机端不能实现的解决方法

flex-wrap属性

默认情况下，项目都排在一条直线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
<pre>
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
</pre>
它可能取三个值
（1）nowrap(默认)：不换行，如下图

Screenshot.png

（2）wrap：换行，第一行在上方

Screenshot-1.png
（3）wrap-reverse：换行，第一行在下方 Screenshot-2.png

然而，今天在用flex布局实现页面的排版时，用以上的属性，在PC端排版很正常，但是在手机端时，不管有多少个元素，它都排在一行，不换行。公司的同事之前也没遇到过这种情况。因此，我花了将近半个小时，查看这各种资料，终于找到解决的方法了。
我们不能直接写成：
<pre>
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
</pre>
而是应该把它所有的可能的情况都写在CSS中，将下面一段代码放在你所在的CSS中，就可以实现手机端和PC端的一致了。
<pre>
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
</pre>