本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章，第2.2节水平折行排列，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.2 水平折行排列要想让view折行也很简单，只需要加一个flex-wrap:wrap即可，代码如下：
<view class="flex-wrp flex-row" style="flex-wrap:wrap" > <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>或者将flex-wrap:wrap添加到flex-row样式中，代码如下：
.flex-row{ flex-direction:row; flex-wrap:wrap; }修改后的运行效果如图2-3所示。
▲图2-3 折行水平排列
相关资源：微信小程序开发入门与实践 高清扫描完整版 带目录书签