E企盈营销工具技术服务商 热线:4006-838-530

微信小程序样式FlexBox精通课程Flex容器的属性flexwrap项目换行

E企盈直播平台营销卖货系统

flex-wrap 项目换行微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua基础语法默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap(默认):不换行wrap:换行,第一行在上方wrap-reverse:换行,第一行在下方小程序应用flex-wrap: nowrap效果如图我们沿用上章节的布局代码和样式代码在我们容器的样式中增加代码Wxss代码.zong{  flex-wrap: nowrap  /* nowrap默认值,可选属性值:nowrap|wrap|wrap-reverse */}flex-wrap: wrap效果如图在容器增加样式flex-wrap:  wrap;完整代码如下:Wxml代码view class=’zong’    view class=’fangxing’    text01/text  /view  view  class=’fangxing’    text02/text  /view  view  class=’fangxing’    text03/text  /view  view  class=’fangxing’    text04/text  /view  view  class=’fangxing’    text05/text  /view/viewWxss代码/* */.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-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精通课程 (微信小程序界面设计必备技能)

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序样式FlexBox精通课程Flex容器的属性flexwrap项目换行
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏