解决space-between最后一排问题

Posted 2021-01-26 sese

display:flex + justify-content: space-between 能够实现2端对齐的布局，这种布局在网页中很常见。不过这种布局方式有一个问题。举个例子，我们假设现在一排放4个图片，而我们数据库里面总共只有6张，此时布局结果如下：

 

第二排数量少于4张，2端对齐就出现上图这种局面了。

我们如何处理这种问题呢？

用我们的::after处理一下即可~

.list-gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -10px;
} 
.list-gallery::after {
    content: "";
    flex: auto;
}
.list-dynamic-gallery>div {
    margin-left: 10px;
    margin-bottom: 10px;
    width: -webkit-calc((100% - 10px*4)/ 4);
    width: calc((100% - 10px*4)/ 4);
}

.list-gallery是包裹图片列表的div，css这样写就能实现每行4张图片的效果了~