|
|
|
|
移动端

2.8 带边距的水平等间隔排列

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

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

年前最后一场技术盛宴 | 1月27日与京东、日志易技术大咖畅聊智能化运维发展趋势!


2.8 带边距的水平等间隔排列

上一节介绍的space-between是顶格显示的,也就是说,最左边和最右边的view是紧挨着父视图边缘的。当我们想留一定的边距时,需要使用space-around,布局代码如下:

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

如果发生折行,仍然是每一行的最左侧和最右侧都会距父视图边缘有一定距离,布局代码如下:

  1. <view class="flex-wrp" 
  2. style="flex-direction:row;justify-content: space-around;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-17所示。


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

51CTO读书频道二维码

 

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

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

读 书 +更多

网络渗透测试——保护网络安全的技术、工具和过程

网络和计算机安全问题已经成为政府、企业必须面对的现实问题。应对安全威胁的途径之一就是采用渗透测试的方法模拟黑客的攻击,找出网络和计...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊