《微信小程序开发入门精要》——第2章，第2.5节水平排列对齐方式

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

2.5　水平排列对齐方式前文所述的水平排列都是从左侧开始排列的，这是默认的对齐方式：左对齐。这种对齐方式是默认的，或在style属性中加入justify-content: flex-start，代码如下：

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

除了左对齐，还有右对齐和中心对齐，只需要将justify-content的值改成flex-end或center，即可实现右对齐或中心对齐的效果。右对齐的布局代码如下：

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

右对齐的效果如图2-7所示。

▲图2-7　右对齐

中心对齐的代码布局代码如下：

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

中心对齐的效果如图2-8所示。

▲图2-8　中心对齐