flex布局--最后一行左对齐的实现方式(css功能实现)

问题：

在我们的日常开发中，在使用flex弹性盒布局的时候，会遇到这样一个常见的问题，当justify-content的值设为space-around或者是space-between时，会存在这样一个问题：如果最后一行元素未占满一行，那么该行元素会均匀分布而不是左对齐。

如实现这种布局:

实现方法

1. 给父级设置display:flex;
2. 实现一行中内容靠边对齐，则需要设置justify-content:space-between;
   这样的话，最后一行不填满的情况下，就会出现下面的问题：
   

解决方案

给父元素创建伪元素并设置flex:auto或者flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* 使用伪元素辅助左对齐 */
.container::after {
    content: '';
    flex: auto;    /* 或者flex: 1 */
}