小程序教程

微信小程序flex box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行

时间:2019/1/6 10:16:54  作者:互联网  来源:网络转载  查看:56623  评论:0
内容摘要:基础语法默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap(默认):不换行wrap:换行,第一行...

基础语法

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

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap(默认):不换行

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行

wrap:换行,第一行在上方
微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行

wrap-reverse:换行,第一行在下方

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行


小程序应用

flex-wrap: nowrap

效果如图

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行

我们沿用上章节的布局代码和样式代码

在我们容器的样式中增加代码

Wxss代码

.zong{

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

}

 

flex-wrap: wrap

效果如图

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行
在容器增加样式flex-wrap:  wrap;完整代码如下:
Wxml代码

<view class='zong'>

   <view class='fangxing'>

    <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代码

/* */

.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;

}

 

flex-wrap: wrap-reverse

效果如图

微信小程序flex_box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行

我们只需更改上小节的容器样式,变更flex-wrap: wrap-reverse
Wxss代码

.zong{

  padding: 10px;

  display: flex;

  flex-direction: row ;/* row默认,属性值有row|row-reverse|column|column-reverse*/

  flex-wrap: wrap-reverse;  /* nowrap 默认,属性值有:nowrap | wrap | wrap-reverse */

}


欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述
相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |