更新时间:2022-08-17 22:27:01
本节书摘来自异步社区《微信小程序开发入门精要》一书中的第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 折行水平排列