flex-wrap

flex-wrap 规定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

 

语法

flex-wrap: nowrap | wrap | wrap-reverse

值

值描述
nowrapflex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值相当于 start 或 before。元素溢出父容器时不换行。
wrapflex 元素被打断到多个行中。cross-start 会根据 flex-direction 的值 相当于start 或before。cross-end 为 cross-start 的相对值。子元素溢出父容器时自动换行。
wrap-reverse和 wrap 的表现一样但是 cross-start 和 cross-end 交替排列。反转 wrap 排列。

例子

HTML 

<h4>flex-wrap:nowrap</h4>
<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-wrap:wrap</h4>
<ul id="box2" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-wrap: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-wrap:nowrap;
  flex-wrap:nowrap;  // 元素溢出父容器时不换行。
}
#box2{
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;  //子元素溢出父容器时自动换行。
}
#box3{
  -webkit-flex-wrap:wrap-reverse;
  flex-wrap:wrap-reverse;  //反转 wrap 排列。
}

执行结果

flex-wrap:nowrap

  • a
  • b
  • c

flex-wrap:wrap

  • a
  • b
  • c

flex-wrap:wrap-reverse

  • a
  • b
  • c


跳至内容顶部