flex three-column multi-line alignment left and right, and left alignment beyond line break

Recently, uni-app development has a page effect: multiple rows and three columns are aligned left and right, beyond the line break to the left. A lot of online searches have not been able to effectively solve this problem, and this is a relatively special situation on the mobile app, the UI effect:

I Here's how to solve this problem by myself: The
first question is to consider the dissatisfaction of the last line. If you use left and right alignment, it is obvious that the last line, if 两列so? For example this:

At this time, left-aligned is not satisfied!

This situation will be encountered. For example, if we use the v-for loop to render the content, and randomly increase the label content in the background, it is impossible to avoid the above justification problem!

So taking into account the special circumstances, the following changes have been made, and the code：

<view class="itemBox">
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
</view>

.itemBox {
    
    
	width: auto;
	display: flex;
	/* 两端对齐 */
	justify-content: space-between;
	flex-wrap: wrap;

	.item {
    
    
		width: 32.5%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #F2F2F2;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-top: 20rpx;
	}
	
	/* 如果最后一行是3个元素 */
	.item:last-child:nth-child(3n - 1) {
    
    
	    margin-right: calc(32.5% + 3% / 3);
	}
	/* 如果最后一行是2个元素 */
	.item:last-child:nth-child(3n - 2) {
    
    
	    margin-right: calc(65% + 6% / 3);
	}
}

Final effect:

It perfectly solves the situation that the last row is not full of one column, and the two columns are not left-aligned!