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

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章，第2.3节垂直排列，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3 垂直排列
只需要设置flex-direction的值为column，就可以将水平排列改成垂直排列，代码如下：

 view 

 view /view 

 view /view 

 view /view 

 /view 

在这段代码中，将顶层view的高度设为300px，而每一个子view的高度是100px，所以垂直方向3个view会紧挨着显示，效果如图2-4所示。

▲图2-4 垂直排列

在垂直方向，如果子view过多会怎么样呢？如下面代码所示。

 view 

 view /view 

 view /view 

 view /view 

 view /view 

 view /view 

 view /view 

 view /view 

 view /view 

 view /view 

 /view 

如果使用上述的布局，会看到如图2-5所示的显示效果。

▲图2-5 被压缩的垂直排列

很明显，所有的子view都被压缩在垂直高度300px的空间内（宽度未改变），能否让垂直排列的子view折列呢？请看下一节的介绍`

智慧校园源码,智慧学校源码+微信小程序+人脸电子班牌 JAVA开发 技术开发环境：Java+springboot+vue+element-ui+mysql 用的是最新的技术栈，完全满足开发要求。 它是一款集智慧教学、智慧教务、智慧校务于一体的校园管理平台
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。