本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章，第2.6节垂直排列对齐方式，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.6 垂直排列对齐方式对于垂直排列来说，如果改变对齐方式，是否可以采用水平排列的方式呢？例如，下面的布局代码是否有效呢？
<view class="flex-wrp" style="flex-direction:column;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-9所示的效果。
▲图2-9 没有改变对齐方式的垂直排列
很显然，垂直排列的3个view并没有右对齐。对于垂直排列来说，需要使用align-items属性（默认是左对齐），而不是justify-content属性，这两个属性的取值基本上相同。例如，下面的布局代码让3个垂直排列的view右对齐。
<view class="flex-wrp" style="flex-direction:column;align-items: 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-10所示。
▲图2-10 垂直排列右对齐
下面的布局代码让垂直排列中心对齐。
<view class="flex-wrp" style="flex-direction:column;align-items: center;"> <view class="flex-item bc_green"></view> <view class="flex-item bc_red"></view> <view class="flex-item bc_blue"></view> </view>垂直排列中心对齐的效果如图2-11所示。
▲图2-11 垂直排列中心对齐
如果垂直排列是右对齐或中心对齐的方式，那么如果折列会是什么效果呢？例如，下面的布局代码垂直方向右对齐，并且折列。
<view class="flex-wrp" style="height:300px;flex-direction:column;align-items: flex-end;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_blue"></view> <view class="flex-item bc_green"></view> <view class="flex-item bc_red"></view> </view>运行效果如图2-12所示。
▲图2-12 垂直方向右对齐，并且折列
从图2-12所示的效果来看，即使是右对齐，如果需要折列，显示的第一列仍然是从靠左方向开始的（从view的背景色就可以看出，第4个view的背景色是蓝色），然后向右折列（但最后一列需要紧贴着父视图右边缘，因为是右对齐）。如果是中心对齐，方式相同。
下面是中心对齐，并且折列的布局代码。
<view class="flex-wrp" style="height:300px;flex-direction:column;align-items: center;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_blue"></view> <view class="flex-item bc_green"></view> <view class="flex-item bc_red"></view> </view>显示效果如图2-13所示。
▲图2-13 垂直方向中心对齐，并且折列
