解決space-between最後一排問題

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張圖片的效果了~