.content-box {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.content-item {
position: relative;
width: calc((100% - 42px) / 3); // 42px=(一行的个数-1)*间隙大小
min-width: calc((100% - 42px) / 3);
max-width: calc((100% - 42px) / 3);
margin-right: 14px;
&:nth-child(-n + 3) {
margin-top: 0; // 第一行的3个margin-top为0
}
&:nth-child(3n) {
margin-right: 0; // 每行的第3个为0
}
}
}
}
flex布局 一行n个,不足n个居左排布
最新推荐文章于 2024-07-10 10:14:49 发布