3列の複数行の配置を左右に変更し、改行を超えて左側の配置を変更する

最近、ユニアプリ開発にはページ効果があります。複数の行と3つの列が左右に配置され、改行、左配置を超えて、多くのオンライン検索でこの問題を効果的に解決できませんでした。これは比較的特殊な状況です。モバイルアプリ、UI効果に：

私はここで自分でこの問題を解決する方法は次のとおりです。
最初の質問は、最後の行の不満を考慮することであるあなたは左と右のアラインメントを使用している場合ならば、それは、最後の行であることは明らかである。两列したがって？例：これ：

現時点では、左揃えでは満足できません！

この状況が発生します。たとえば、v-forループを使用してコンテンツをレンダリングし、バックグラウンドでラベルコンテンツをランダムに増やす場合、上記の正当化の問題を回避することは不可能です。

そのため、特別な状況を考慮して、次の変更が加えられ、コードが変更されました：

<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);
	}
}

最終効果：

これは、最後の行が1つの列でいっぱいでなく、2つの列が左揃えになっていないという状況を完全に解決します。