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

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

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

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

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

▲图2-14　space-between效果

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

 <view class="flex-wrp" 
     style="flex-direction:row;justify-content: space-between;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-15所示的效果。

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