语法
flex-wrap: nowrap | wrap | wrap-reverse
- nowrap：当子元素溢出父容器时不换行。
- wrap：当子元素溢出父容器时自动换行。
- wrap-reverse：反转 wrap 排列。
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
flex-wrap示例：
flex-wrap:nowrap
- a
- b
- c
flex-wrap:wrap
- a
- b
- c
flex-wrap:wrap-reverse
- a
- b
- c