flex布局 justify-content：space-between; 解決最后一排數量不夠自動向兩端排列問題和flex布局的元素會有默認間隙（垂直間隙）

 

1 .flex 布局兩端對齊當最后一排數量不夠時，會出現以下布局情況

 

 

 

 

實現效果：

  

 

 解決方案：使用after偽類, 解決最后一排數量不夠兩端分布的情況。寬度就是每張圖片的寬度

.list:after {
    content: "";
    width: 1.87rem;
 }

 

2.flex布局的元素會有默認間隙（垂直間隙）

 

 

 

 

效果圖：

解決方案：使用align-content:flex-start解決

 

附上所有有關代碼參考： 

.list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        margin: 0 0.53rem;
        padding-bottom: 0.67rem;
        align-content: flex-start; // 解決flex布局的元素會有默認間隙（垂直間隙）
        li {
          img {
            width: 1.87rem;
            height: 1.87rem;
            margin-top: 0.67rem;
          }
        }
      }
      .list:after {
        content: "";
        width: 1.87rem;
      }
}