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

flex-wrap属性

默认情况下，项目都排在一条直线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

 .box{
 flex-wrap: nowrap | wrap | wrap-reverse;
 }
 

它可能取三个值
（1）nowrap(默认)：不换行，如下图

Screenshot.png

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

Screenshot-1.png

（3）wrap-reverse：换行，第一行在下方

Screenshot-2.png

然而，今天在用flex布局实现页面的排版时，用以上的属性，在PC端排版很正常，但是在手机端时，不管有多少个元素，它都排在一行，不换行。公司的同事之前也没遇到过这种情况。因此，我花了将近半个小时，查看这各种资料，终于找到解决的方法了。
我们不能直接写成：

 display: flex;
 -webkit-box-pack: start;
 justify-content: flex-start;
 -webkit-flex-wrap: wrap;
 

而是应该把它所有的可能的情况都写在CSS中，将下面一段代码放在你所在的CSS中，就可以实现手机端和PC端的一致了。

 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;