本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章，第2.3节垂直排列，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.3 垂直排列只需要设置flex-direction的值为column，就可以将水平排列改成垂直排列，代码如下：
<view class="flex-wrp" style="height: 300px;flex-direction:column;"> <view class="flex-item bc_green"></view> <view class="flex-item bc_red"></view> <view class="flex-item bc_blue"></view> </view>在这段代码中，将顶层view的高度设为300px，而每一个子view的高度是100px，所以垂直方向3个view会紧挨着显示，效果如图2-4所示。
▲图2-4 垂直排列
在垂直方向，如果子view过多会怎么样呢？如下面代码所示。
<view class="flex-wrp" style="height: 300px;flex-direction:column;"> <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_blue"></view> <view class="flex-item bc_green"></view> <view class="flex-item bc_red"></view> <view class="flex-item bc_blue"></view> </view>如果使用上述的布局，会看到如图2-5所示的显示效果。
▲图2-5 被压缩的垂直排列
很明显，所有的子view都被压缩在垂直高度300px的空间内（宽度未改变），能否让垂直排列的子view折列呢？请看下一节的介绍`
