flex布局+自动换行

效果图：

 代码：

<div class="newRightPeople">
    <div class="peopleCard" v-for="(i,index) in item4[selectTypeIndex].list">
	    <div class="cardImg">
		    <img :src="i.src"/>
	    </div>
	    <div class="cardInfo">
		    <div class="cardIdentity">
			    <span class="cardName">{{i.name}}</span>
			    <span class="cardPost">{{i.post}}</span>
		    </div>
            <div class="cardDuty">{{i.duty}}</div>
	    </div>
    </div>
</div>

js代码：

item4:[
				 {
				 	title:"BPM",
				 	list:[
				 	 {
				 	 	"src":'img/集团报销单.png',
				 	 	name:"王凯",
				 	 	post:"软件工程师",
				 	 	duty:"负责范围BPM系统开发"
				 	 },{
				 	 	"src":'img/集团报销单.png',
				 	 	name:"王凯",
				 	 	post:"软件工程师",
				 	 	duty:"负责范围BPM系统开发"
				 	 },{
				 	 	"src":'img/集团报销单.png',
				 	 	name:"王凯",
				 	 	post:"软件工程师",
				 	 	duty:"负责范围BPM系统开发"
				 	 },{
				 	 	"src":'img/集团报销单.png',
				 	 	name:"王凯",
				 	 	post:"软件工程师",
				 	 	duty:"负责范围BPM系统开发"
				 	 },
				 	]
				 }
        ]

CSS代码：

.newRightPeople{
	display: flex;
    flex-wrap: wrap;/*换行*/
}
.peopleCard{
	width: 19.0625rem;
	height: 5rem;
	background: #FFFFFF;
	box-shadow: 0px 2px 5px 0px rgba(0, 12, 98, 0.1);
	border-radius: 5px;
	margin-left: 1.875rem;
	margin-top: 1.25rem;
	display: flex;
}
.peopleCard:hover .cardAsk{
	background-color: #457BF7;
}
.cardImg{
	width:50px;
	height: 50px;
	margin-left:1.25rem;
	margin-top:0.9375rem;
}
.cardInfo{
    width: 12.5rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}
.cardIdentity{
	display: flex;
}
.cardName{
	text-align: left;
	font-size: 17px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #444444;
}
.cardPost{
	height: 18px;
	background: #FFFFFF;
	border: 1px solid #457BF7;
	border-radius: 3px;
	margin-left: 10px;
	font-size: 15px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #457BF7;
}
.cardDuty{
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.45);
	text-align: left;	
}