|
|
|
|
移动端

2.7 水平等间隔排列

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

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

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

2.7 水平等间隔排列

如果想让view均匀地水平分别在窗口上,且每两个view之间的间隔相同,那么需要将justify-content属性的值设为space-between,布局代码如下:

  1. <view class="flex-wrp" style="flex-direction:row;justify-content: space-between"> 
  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> 

显示的效果如图2-14所示。

如果子view过多,并且设置为折行显示,那么子view会如何排列呢?先看下面的布局代码。

  1. <view class="flex-wrp" 
  2. style="flex-direction:row;justify-content: space-between;flex-wrap:wrap"> 
  3. <view class="flex-item bc_green"></view> 
  4. <view class="flex-item bc_red"></view> 
  5. <view class="flex-item bc_blue"></view> 
  6. <view class="flex-item bc_green"></view> 
  7. <view class="flex-item bc_red"></view> 
  8. <view class="flex-item bc_green"></view> 
  9. <view class="flex-item bc_blue"></view> 
  10. </view> 

使用上述的布局,会得到如图2-15所示的效果。

从图2-15所示的效果来看,不管折多少行,同一行相邻两个view之间的间距都是相等的。


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

51CTO读书频道二维码

 

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

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

读 书 +更多

超级网管员——网络服务

本书全面介绍了Windows Server 2003 R2中最常用的各种服务,包括域名服务、动态IP地址服务、Windows名称服务、活动目录服务、Web服务、FTP...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊