位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 项目换行(flex-wrap)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 排列方向(flex-direction) 下一篇: flex-flow属性

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

image.png

       基础语法和值如下:

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

nowrap(默认):不换行,示意图如7-10所示。

image.png

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

image.png

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

image.png

1.flex-wrap: nowrap

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-13所示。

image.png

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所示。

image.png


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所示。

image.png


上一篇: 排列方向(flex-direction) 下一篇: flex-flow属性
毕业设计网             广告联系QQ:45157718(微信同号)