之前在用弹性盒子做自适应布局时,发现:如果有7个卡片,第一行放5个,第二行剩余的2个卡片会分散在第二行两端,非常不美观!
这里提供了一种实现思路,最后一行不满5个卡片时,让最后一个卡片占满右边空间,效果图如下:
实现代码:
// 最外层父元素
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
// 卡片
> .card {
height: 150px;
flex: 0 0 18%; //每一个盒子占18%
min-width: 18%;
margin-right: calc(9.99% / 4);
margin-bottom: calc(9.99% / 4);
// 每行最后一个卡片
&:nth-child(5n) {
margin-right: 0;
}
// 最后一个卡片
&:last-child {
margin-right: auto;
}
}
}