css如何实现整体两边对齐，末尾元素左边对齐，类似九宫格最后少了一格

实现如下图效果（两边间距为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
}