解决flex布局，warp换行水平两端对齐内容不从左到右顺序排列问题

解决思路： 在标签最后面伪造需要的元素使用visibility: hidden隐藏掉，站位

直接上代码：

<template>
	<view>
		<view class="tabBox2">
			<image src="../../static/image/noAvter.png" mode="" v-for="(item,index) in imageNumber">
			</image>
			<image v-if="remainder==3" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
			<image v-if="remainder==2" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
			<image v-if="remainder==2" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
			<image v-if="remainder==1" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
			<image v-if="remainder==1" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
			<image v-if="remainder==1" src="../../static/image/noAvter.png" mode="" class="hideImgae">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageNumber:11,
				remainder: 0,
			};
		},
		onLoad(opt) {
			this.isEvenNumber()
		},
		methods: {
			// 验证是否4的整数倍图片个数（根据自己实际需求去计算最后需要hidden的元素个数）
			isEvenNumber() {
				if (this.imageNumber % 4 != 0) {
					this.remainder = this.imageNumber  % 4
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabBoxDiv {
		@include flex;
		justify-content: center;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		.tabBox2 {
			@include flex;
			flex-wrap: wrap;
			justify-content: space-between;
			/* 设置侧轴多行元素对齐 (Y轴) align-content属性和justify-content差不多 会覆盖align-items*/
			align-content: flex-start;
			image {
				width: 150rpx;
				height: 150rpx;
				margin-bottom: 25rpx;
				border-radius: 10rpx;
			}
	}
	.hideImgae {
		visibility: hidden;
	}
</style>

效果如图：

注意：
请更改isEvenNumber方法，根据自己实际需求去计算最后需要hidden的元素个数
博主的是一排只显示四个所以是—% 4 如果是一排要显示6个 就改成 --% 6 依次类推，可以自行更改imageNumber的值进行测试
欢迎留言交流~