|
|
|
|
移动端

2.4 垂直折列排列

《微信小程序开发入门精要》第2章布局,本章主要介绍了小程序中的主要布局方式,通过这些布局,可以设计出各式各样的UI。本节为大家介绍垂直折列排列。

作者:李宁来源:人民邮电出版社|2017-12-13 15:16

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

2.4 垂直折列排列

折列和折行的方式一样,只需要加上flex-wrap:wrap即可,可以使用style属性添加,或在样式中添加,然后使用class属性引用样式。下面的代码使用style属性添加了flex-wrap:wrap。

  1. <view class="flex-wrp" style="height: 300px;flex-direction:column; flex-wrap:wrap;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. <view class="flex-item bc_green"></view> 
  6. <view class="flex-item bc_red"></view> 
  7. <view class="flex-item bc_blue"></view> 
  8. <view class="flex-item bc_green"></view> 
  9. <view class="flex-item bc_red"></view> 
  10. <view class="flex-item bc_blue"></view> 
  11. </view> 

使用上面的布局后,会看到如图2-6所示的效果。

从图2-6所示的效果可以看出,折列排列是在第2、3列从上到下依次排列的。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网管员必读-网络管理(第2版)

本书是对《网管员必读—网络管理》第1版的全面重写,因为书中所涉及的两个主要网络操作系统都已升级。本书介绍的是Windows Server 2003 R2...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊