css-移动端居中一行均分排列

<template>
	<view class="test2">
		<view class="upload-group">
			<view v-if="imagesUrl" class="box img" v-for="(item,idx) in imagesUrl">
				<view class="box-content">
					<image :src="item.path" mode="aspectFill" @click="onPreview(idx)"></image>
					<view class="close-btn" @click="onClose(idx)">&times;</view>
				</view>
			</view>
			<view class="box">
				<view class="box-content add" @click="addFiles" v-if="imagesUrl.length<count">+</view>
			</view>
		</view>
		<view>
			<button @click="upload" type="primary">确认上传</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagesUrl: [],
				count: 9,
				picsId: []
			};
		},
		// onLoad(){
		// 	this.imagesUrl=[]
		// },
		methods: {
			// 点击图片预览
			onPreview(idx) {
				console.log(idx);
				let arr = this.imagesUrl.map(item => {
					return item.path
				})
				uni.previewImage({
					current: idx,
					urls: arr
				})
			},
			// 点击删除按钮
			onClose(idx) {
				console.log(idx);
				this.imagesUrl.splice(idx, 1)
			},

			//点击上传
			upload() {
				let resArr = this.imagesUrl.map(async item => {
					return await this.uploadOne(item)
				})
				console.log(resArr);
				//监听resArr所有的Promise异步请求有没有执行成功
				Promise.all(resArr).then(item => {
					this.picsId = item.map(i => i.fileID)
					console.log("@@@", this.picsId);
				})
			},

			uploadOne(item) {
				return uniCloud.uploadFile({
					filePath: item.path,
					cloudPath: item.name
				})
			},
			// 选择本地图片
			addFiles() {
				uni.chooseImage
				uni.chooseImage({
					count: this.count,
					success: (res) => {
						this.imagesUrl = [...this.imagesUrl, ...res.tempFiles]
						this.imagesUrl = this.imagesUrl.slice(0, this.count)
					},
					fail: (err) => {
						console.log(err.message);
					}

				})
			}
		}
	}
</script>

<style lang="less">
	:root,
	body {
		padding: 0;
		margin: 0;
		border: none;
	}

	.upload-group {
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		margin: -5px;
		padding: 10rpx 0;

		.box {
			position: relative;
			width: 33.33%;  //一行放三个所以是33.333
			height: 0;  // 高度由padding-top撑开
			padding-top: 33.33%; // 百分比的值是相对于父元素的宽度计算

			.box-content {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: 5px;
				border: 1px #eee solid;
				border-radius: 5px;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.close-btn {
				color: #eee;
				font-size: 30rpx;
				position: absolute;
				top: 0;
				right: 0rpx;
				background-color: #888;
				border-radius: 50%;
				padding-left: 10rpx;
				padding-right: 10rpx;
				padding-bottom: 2rpx;
			}
		}

		.add {
			color: #888;
			font-size: 120rpx;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>