《微信小程序开发入门精要》——第2章，第2.2节水平折行排列

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第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　折行水平排列