《微信小程序开发入门精要》——第2章，第2.3节垂直排列

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第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折列呢？请看下一节的介绍`