|
|
51CTO旗下网站
|
|
移动端

2.2 水平折行排列

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

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

【51CTO技术沙龙】10月27日,让我们共同探索AI场景化应用实现之道

2.2 水平折行排列

要想让view折行也很简单,只需要加一个flex-wrap:wrap即可,代码如下:

  1. <view class="flex-wrp flex-row" style="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> 

或者将flex-wrap:wrap添加到flex-row样式中,代码如下:

  1. .flex-row{  
  2. flex-direction:row;  
  3. flex-wrap:wrap;  

修改后的运行效果如图2-3所示。


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

51CTO读书频道二维码

 

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

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

读 书 +更多

Windows编程启示录

主要内容: ● 如何设计像自动售货机那样有效的用户界面。 ● 深入理解窗口和对话框的管理机制。 ● 为什么性能优化与我们在直觉上的理...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊