效果图如下：
以一行显示4个为例
image.png
代码如下
<div class="exam-list">
<div class="exam-item">竞赛封面</div>
<div class="exam-item">竞赛简介</div>
<div class="exam-item">排行榜详情</div>
<div class="exam-item">环节1</div>
<div class="exam-item">环节2</div>
<div class="exam-item">环节3</div>
</div>
---css 代码
.exam-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
.exam-item {
flex: 1;
height: 140px;
text-align: center;
margin: 0 20px 20px 0; // 间隙为20px
padding-top: 20px;
border: 1px solid #888;
box-sizing: border-box;
width: calc((100% - 60px) / 4); // 我这里一行显示4个 所以是/4 一行显示几个就除以几
// 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc((100% - 60px) / 4);
max-width: calc((100% - 60px) / 4);
&:nth-child(4n + 4) {
margin-right: 0;
}
}
}
