使用 flex布局 解决数量不够自动向两端排列的问题

原效果:

需求效果:

解决方案: 父级添加after伪类

html:

<view class="gradeList">
	<view class="grade-item" v-for="(item,index) in gradeList" :key="index" @click="changeGrade(index)">
		{{item.name}}
	</view>
</view>

css:

.gradeList {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: justify;
	background-color: #FFFFFF;
	padding: 46upx 34upx 82upx;
}
// 加上after伪类 
.gradeList:after{
    content: '';
    width: 188upx;
    height: 84upx;
  }
.gradeList .grade-item {
	width: 188upx;
	height: 84upx;
	color: #333333;
	font-size: 32upx;
	background: #FFFFFF;
	text-align: center;
	line-height: 84upx;
	box-sizing: border-box;	
	margin-bottom: 24upx;
	border: 2upx solid #E2E2E2;
}

完美解决两端对齐布局混乱的情况