引用张鑫旭的一篇文章分享给大家,如果你想进行修改进入链接点到对应的图片生成的链接进入,方可修改。
问题描述
//html
//css
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
这种情况明显与我们想要的情况不同。
行数固定解决方法
方法一 用margin 模拟缝隙
比如
.container {
display: flex;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
样式如下
方法二 根据最后一行个数确定margin
由于每一列的数目都是固定的,因此,我们可以计算出不同个数列