flex-一行显示固定数量
# flex-一行显示固定数量
---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;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
上次更新: 2024/08/14, 04:14:33