目录

flex-flow

flex-flow是一个简写属性，它由 flex-direction (伸缩方向) 和 flex-wrap (是否强制换行)组成。

 

语法

flex-flow: <'flex-direction'> | <'flex-wrap'>

值

值描述
<'flex-direction'>更多信息请查看 flex-direction 。
<'flex-wrap'>更多信息请查看 flex-wrap 。

例子

HTML 

<h4>flex-flow:row nowrap</h4>    
<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-flow:row wrap-reverse</h4>
<ul id="box2" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-flow:column wrap-reverse;</h4>
<ul id="box3" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

CSS 

.box{
  display:-webkit-flex;
  display:flex;
  width:120px;
  margin:0;
  padding:10px;
  list-style:none;
  background-color:#333;
}
.box li{
  width:50px;
  height:50px;
  border:1px solid #aaa;
  text-align:center;
  color:#fff;
}
#box{
  -webkit-flex-flow:row nowrap;
  flex-flow:row nowrap;
}
#box2{
  -webkit-flex-flow:row wrap-reverse;
  flex-flow:row wrap-reverse;
}
#box3{
  height:120px;
  -webkit-flex-flow:column wrap-reverse;
  flex-flow:column wrap-reverse;
}

执行结果

flex-flow:row nowrap

flex-flow:row wrap-reverse

flex-flow:column wrap-reverse;


跳至内容顶部