你的位置: 前端博客 > CSS3 > CSS3弹性盒flexbox > flex-flow

flex-flow (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。

语法

flex-flow: <‘flex-direction> || <‘flex-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-flow:row nowrap;
flex-flow:row nowrap;
}
#box2{
-webkit-flex-flow:row wrap-reverse;
flex-flow:row wrap-reverse;
}
#box3{
height:220px;
-webkit-flex-flow:column wrap-reverse;
flex-flow:column wrap-reverse;
}
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-flow:row wrap-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-flow:column wrap-reverse;</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

flex-flow示例:

flex-flow:row nowrap

flex-flow:row wrap-reverse

flex-flow:column wrap-reverse;

返回CSS3弹性盒模型flexbox布局的完整教程