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;
      }
}