实现如下图效果(两边间距为0,中间有间隔)有两种方法:
方法一:采用 flex 布局,然后最后少了补齐一个容器占位
这里假如有5个项目,可以采用3n-1的计算方式来判断是否需要添加F盒子,这样不会导致最后两个元素左右对齐
<view class="list-box">
<view class="item">A</view>
<view class="item">B</view>
<view class="item">C</view>
<view class="item">D</view>
<view class="item">E</view>
<view class="item-add">F</view>
</view>
.list-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
width: 30%;
heigth: 100px
}
.item-add {
width: 30%;
}
方法二:使用 grid 布局
<view class="list-box">
<view class="item">A</view>
<view class="item">B</view>
<view class="item">C</view>
<view class="item">D</view>
<view class="item">E</view>
</view>
.list-box {
display: grid;
grid-column-gap: 5%;
grid-template-columns: repeat(3,1fr);
}
.item {
width: 30%;
heigth: 100px
}