收藏
评论

小程序进行垂直排列

垂直排列

只需要设置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过多会怎么样呢?如下面代码所示。

w 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折列呢?请看下一节的介绍。

详细的可以参见:https://www.epubit.com/book/detail/11006



最后一次编辑于  2018-09-07
赞 0
收藏

1 个评论

  • 总之随便啦
    总之随便啦
    2018-09-28

    我想知道在上面的代码布局中你子view里面什么也没有,高度为应该为0,是怎么出现均匀分布的效果的

    2018-09-28
    赞同
    回复 2
    • Jany、
      Jany、
      2018-10-09

      flex-direction:column;

      这个属性控制的。

      http://www.runoob.com/cssref/css3-pr-flex-direction.html


      2018-10-09
      回复
    • 总之随便啦
      总之随便啦
      2018-10-11回复Jany、

      这个属性只是控制子元素的排列方向吧 我问的是他子元素的内容什么都没有 整一块的高度应该是没有内容都撑起来的

      2018-10-11
      回复