css样式---一行五个盒子 多余换行 间隔 10rpx

<template>
	<!-- 一行五个盒子 多余换行  间隔 10rpx 使用calc主要用于指定元素的长度 无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px，calc是支持单位的混合使用的，其计算优先级别和数学一致 -->
	<view class="flex  videoList">
		<view class="videoRoom r1 ">
			直播1
		</view>
		<view class="videoRoom">
			直播1
		</view>
		<view class="videoRoom ">
			直播1
		</view>
		<view class="videoRoom r1 ">
			直播1
		</view>
		<view class="videoRoom">
			直播1
		</view>
		<view class="videoRoom ">
			直播1
		</view>
		<view class="videoRoom r1">
			直播1
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.videoList {
		width: 100vw;
		flex-wrap: wrap;

		.videoRoom {
			width: calc(20% - 20rpx);
			height: 200rpx;
			margin: 10rpx;
			background: #333;
		}

		.r1 {
			background: #55ff7f33;
		}
	}
</style>