wxss实现多列显示

今天主要通过三种方式实现：
wxml代码：

<view class="container">
  <view class="viewContainer" wx:for="{{cells}}">
    <image class="cellIcon" src="{{item.imageUrl}}"></image>
    <view>{{item.title}}</view>
  </view>
</view>

1、通过浮动float实现

.container{
  margin: 0;
  padding: 0;
  display: block;
}
.viewContainer{
    float: left;
    width: 33.3%;
    height: 150px;
    text-align: center;
    border: 1px solid lightblue;
    box-sizing: border-box;

}
.cellIcon{
  width: 100%;
  height: 120px;
}```
2、 flex-direction实现：

.container{
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
.viewContainer{
width: 33.3%;
padding: 5px;
box-sizing: border-box;
border: 1px solid lightblue;

}
.cellIcon{
width: 100%;
height: 110px;
}```
3、通过 column-count实现

.container{
  margin: 0;
  padding: 0;
  display: block;
  column-count: 2;
  column-gap: 0px;
  }
.viewContainer{
    height: 150px;
    text-align: center;
    border: 1px solid lightblue;
    box-sizing: border-box;
    background: red;
}
.cellIcon{
  width: 100%;
  height: 120px;
}```
最终效果:
![](https://img.haomeiwen.com/i1964261/8383f50d56cbaf10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)