原里是动态计算右外边距，不使用flex的justify-content
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.mycards {
width: 98%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/*justify-content: space-between;*/
}
.card_item {
width: 31%;
background-color: #24c789;
height: 20px;
margin-bottom: 10px;
}
.card_item:not(:nth-child(3n)){
margin-right: calc(7%/3);
/* 这个可以根据需求自行修改 7%=100%-31%(宽度)*3(列数) 每行最后一个没有margin*/
}
</style>
</head>
<body>
<div class="mycards">
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
<div class="card_item"></div>
</div>
</body>
</html>