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

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第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所示。

▲图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所示。

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

相关资源：七夕情人节表白HTML源码(两款)