Flex 弹性布局中 主线对齐方式 最后一行 左边对齐

 在弹性布局中 最后一行如果排不下的话 会居中或以剩余盒子来进行排序

 在这里用 空的占位标签来把排序的 盒子挤过去

HTML:

<scroll-view :scroll-top="scrollTop" :scroll-y="true" :enable-flex='true' class="scroll-Y tool">
	<!-- 这里是实际排序 -->
	<view class="toolItem" v-for="(item,i) in scrollList" :key='i'>
		<text>{{item.text}}</text>
		<u-icon size="25" :name="item.icon"></u-icon>
	</view>
	<!-- 此处进行是否整除判断以及 计算剩余盒子 -->
	<template v-if="scrollList.length%3">
		<view class="toolItem" v-for="(item,i) in (3-(scrollList.length%3))" :key='i'>
		</view>
	</template>
</scroll-view>

CSS:

.toolItem {
	height: 13vh;
	width: 12vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	text {
		margin: 5px 0;
	}
}