《微信小程序开发入门精要》——第2章,第2.8节带边距的水平等间隔排列

  1. 云栖社区>
  2. 博客>
  3. 正文

《微信小程序开发入门精要》——第2章,第2.8节带边距的水平等间隔排列

异步社区 2017-05-02 14:21:00 浏览1384
展开阅读全文

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章,第2.8节带边距的水平等间隔排列,作者 李宁,更多章节内容可以访问云栖社区“异步社区”公众号查看

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

<view class="flex-wrp" style="flex-direction:row;justify-content: space-around">
   <view class="flex-item bc_green"></view>
   <view class="flex-item bc_red"></view>
   <view class="flex-item bc_blue"></view>
</view>

运行效果如图2-16所示。


10a1b95a2d09843d494c118ea2d3199e08779afa

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

  <view class="flex-wrp" 
     style="flex-direction:row;justify-content: space-around;flex-wrap:wrap">
    <view class="flex-item bc_green"></view>
    <view class="flex-item bc_red"></view>
    <view class="flex-item bc_blue"></view>
    <view class="flex-item bc_green"></view>
    <view class="flex-item bc_red"></view>
    <view class="flex-item bc_green"></view>
 <view class="flex-item bc_blue"></view> 
 </view>

显示效果如图2-17所示。


1ee9dbd03b0b834efe5acffed8b39bf64baac165

▲图2-17 折行后的space-around效果

网友评论

登录后评论
0/500
评论
异步社区
+ 关注