css实现三列布局使⽤css3的Flex布局实现列表展⽰
实现效果图如下：
通过css3样式实现（部分代码）：
.box {
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-content: flex-start;
}
在实际中会遇到list列表对3取余剩2的情况，页⾯就不是我们想要的了
我们想实现的是最后的⼀个靠左，这时候需要借助⼀个盒⼦，内容为空，边框颜⾊为背景⾊，代码如下：
.foodie-right-li-block {
border-color: #f6f7f7;
}
需要注意的是，在list对3取余剩1和0的时候是不需要的，因此需要添加判断
<view class="foodie-right-li foodie-right-li-block" v-if="list.length % 3 != 0"></view>
结果如下：
好啦，到这⾥就结束了
如果想实现每⾏显⽰4个label发现这个⽅法不好使了，其实还是能够套⽤的，更改取余就好啦，代码如下：
<view class="foodie-right-li foodie-right-li-block" v-if="class_fixed_new.length % 4 == 2 || class_fixed_new.length % 4 == 3" v-for="(item,index) in (4-class_fixed_new.length% 4 )"></view>说明：
  1. class_fixed_new为list列表
  2.因为余数为1和4的时候是不需要增加额外的盒⼦来辅助布局，隐藏通过v-if来现在，不加也可以，但是得加余数为0的判断
3.实现发布朋友圈的照⽚列表展⽰
话不多说，直接上码
<view class="release-imgs">
<view class="release-imgs-li" v-for="(item,index) in imgsList" :key="index"></view>
<view class="release-imgs-li release-imgs-li-add" v-if="imgsList.length != 9">+</view>
<view class="release-imgs-li release-imgs-li-block" v-if="imgsList.length == 1 || imgsList.length == 4 || imgsList.length == 7"></view> </view>
<script>
export default {
data() {
return {
imgsList: [0,1]
}
},
}
</script>
<style lang="less">
// 图⽚
.release-imgs {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
.
release-imgs-li {
width: 220upx;
height: 220upx;
background: goldenrod;
margin-bottom: 15upx;
}
.release-imgs-li-add {
background: #c9caca;
font-size: 100upx;
line-height: 200upx;
text-align: center;
}
.release-imgs-li-block {
background: #eee;
}
}
</style>
如果list的长度是1，4，7，那么需要⼀个额外的盒⼦