flex布局最后一行列表左對齊的方法

 

先貼出鑫大神的文章：https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

這里記錄下自己使用其中第一種方法時的用法和思路詳解。

問題說明：

　　用 flex 布局時，當設置 justify-content: space-between 時，會遇到最后一行列表沒有對齊（文章里說的那種情況）；不使用 flex-wrap: wrap 每個列表的 margin 值又會使得一行內最后一個列表始終不能對齊（如截圖）

 

最外層 box：width: 1200px ; 一個 card 的 width: 384px;  需要給第1，2 個 card 加上 margin-right: 20px　　

.card-box {
　width: 1200px;
  display: flex;
  flex-wrap: wrap;
  
  .card {
    background-color: #fff;
    width: 384px;

    &:not(:nth-child(3n)) {
      margin-right: calc(48px / 2); // 1200 - 3*384 = 48
    }
  }
}