默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。示意图如7-9所示。

       基础语法和值如下：

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

nowrap（默认）：不换行，示意图如7-10所示。

wrap：换行，第一行在上方，示意图如7-11所示。

wrap-reverse：换行，第一行在下方，示意图如7-12所示。

1.flex-wrap: nowrap

我们沿用上面7.2.1节的布局代码和样式代码。在我们容器的样式中增加代码。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
  flex-wrap: nowrap  /* nowrap默认值，可选属性值：nowrap|wrap|wrap-reverse */
}

效果如图7-13所示。

2.flex-wrap: wrap

在容器增加样式flex-wrap: wrap；完整代码如下。

.wxml文件代码示例

小白教程网www.2d5.net

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
  <view  class='fangxing'>
    <text>03</text>
  </view>
  <view  class='fangxing'>
    <text>04</text>
  </view>
  <view  class='fangxing'>
    <text>05</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

/* */
.zong{
  padding: 10px;
  display: flex;
  flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/
  flex-wrap: wrap;  /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */
}
.fangxing{
  width: 100px; height: 100px; 
  background-color:  beige;
  margin: 10px;
}

效果如图7-14所示。

3.flex-wrap: wrap-reverse

我们只需更改上小节的容器样式，变更flex-wrap: wrap-reverse。

.wxss文件代码示例

小白教程网www.2d5.net

.zong{
  padding: 10px;
  display: flex;
  flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/
  flex-wrap: wrap-reverse;  /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */
}

效果如图7-15所示。