前端3个数据布局问题

效果实例：

 

 

 

前端使用vue.js 写的H5页面

<template v-if="list.length > 0 ">
					<div class="case-list-box">
						<div class="case-box" v-for="(item , index) in list">
							<div class="case-img">
								<img :src="item.img" >
							</div>
							<div class="case-title">
								<span class="casr-tag">{{item.category.name}}</span>{{item.name}}
							</div>
							<div class="mycase-remark">
								{{item.content}}
							</div>
						</div>
					</div>
				</template>

　　

相关的css设置

#父级样式
.case-list-box{
	display: flex;
	flex-wrap: wrap;
}

#子级样式
.case-box{
	width: 32%;
	line-height: 35px;
	font-size: 22px;
	background-color: #FFFFFF;
	padding-bottom: 20px;
	margin-top: 20px;
}
.case-box:nth-child(3n),.case-box:nth-child(3n+2){
	margin-left: 2%;
}

　　重点是后面的:nth-child(3n)  和 :nth-child(3n+2)

 　　

　　理解后面的参数意义就可以了  我写不明白