flex布局使用space-between后最后一行左对齐

需求

在页面开发的过程中，我们往往会经常使用到CSS布局，而目前使用最多的大部分都是flex、grid布局两种，今天UP主在编写页面的时候，有这样一个需求

1、在一个盒子里面，有很多元素，需要让他横向排列

2、每个元素的宽度未知

3、当元素很多的时候，需要自动换行的下一行

看是简单的需求，办法也有很多，下面列举两个

不完美实现方案

1、使用inline-block

直接在css中使用display:inline-block，就可以实现效果

效果如图：

目前是完全符合上面的需求的，但是我们会发现，第一行最后一个位置，因为容纳不下下一个元素了，所以直接换行显示下一个元素，这样就导致最后的空隙很大，很影响美观

2、使用flex

有朋友可能会想，这个不是很简单，直接使用flex布局，然后使用justify-content: space-between不就可以完美的解决空隙大的问题啦，而且看起来很很和谐，使用这个方法确实可以让第一行的空隙变得很完美，但是我们会发现另外一个问题

效果如图：

可以看到，我们的第一行的确是完美的解决了空隙大的问题，但是随之而来的，就是第二行因为使用了justify-content: space-between，导致下面直接把剩下的元素直接平均分了，很明显这样是会导致最后一行元素，不够铺满，而直接平均分了，这样也是不行的，那到底要怎么来解决问题呢

完美实现方法

如图所示，这就是我们说需要的效果，最后一行元素不够铺满一行时，让元素左对齐排列，那这样是如何实现的呢

其实实现方法很简单，同样是使用flex布局，并且使用justify-content: space-between属性

关键一步，我们在当前元素的伪元素after添加flex：auto即可实现

.parent{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: '';
    flex: auto;
  }
}

确实非常简单，我们看下原理

就是通过伪元素让伪元素的宽度正好补齐剩余的宽度，这样就相当于是一整行铺满，所以就不会出现上面的直接将下面的几个元素直接平均分了

Tips:方法简单粗暴，可能有更好的办法，但是UP也是想分享自己在开发过程中遇到的问题是如何解决的，如果有更好的办法，也欢迎大家相互讨论相互学习