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