flex佈局justify-content:space-between最後一排數量不夠自動向兩端排列問題解決辦法

flex 佈局兩端對齊當最後一排數量不夠時，會出現以下佈局情況

 

如圖所示排布情況

 

這時，我們可以下面after僞類，解決最後一排數量不夠兩端分佈的情況

 

.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  <!--加上after僞類，解決最後一排數量不夠兩端分佈的情況-->
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }

最終效果，完美解決兩端對齊佈局混亂的情況

 

在這裏插入圖片描述

 

當然，如果佈局每列有4個，5個多個可以一次類推，舉一反三