flex布局换行之后让底部一行左对齐

flex布局换行之后让底部一行左对齐

在用flex布局的时候遇到了下面这种问题，这是我的结构

 <div class="videoMain">
      <div class="video" v-for="num in 8" :key="num"></div>
  </div>

 .videoMain{
        display: flex; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        height: 100%;
        overflow-y: auto;
        
        .video{
            width: 342px;
            height: 210px;
            margin-bottom:10px;
            background-color: cyan;
        }
     }

当我使用 justify-content:space-between 或者 space-around 的时候
页面效果是这样的

很明显最后一行的三个元素我想让他左对齐，看到网上有说给父级元素加上伪类，我试了试

.videoMain{
        display: flex; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        
        
        .video{
            width: 342px;
            height: 210px;
            margin-bottom:10px;
            background-color: cyan;
        }
        i{
            width: 342px;
        }
     }
     .videoMain::after{
        content: '';
        flex: auto; // 或者1
     }

最后效果是这样的，最后一行都连上了（第一张图），也没有达到我想要的左对齐的效果，写margin-right之后和上面的又不对齐了（第二张图），不知道为什么别人说的就可以，有知道的也可以评论告诉我。

个人的解决方案

加了3个i标签，并把它的宽度设置的和.video的宽度一样，没有高度，这样的做的目的是最后一行差的给它补上，所以它会自动对齐，又因为没有写高度，所以页面中什么也不会显示

<div class="videoMain">
  <div class="video" v-for="num in 8" :key="num"></div>
    <i v-for="num in 3" :key="num"></i>
</div>

 i{
    width: 342px;
 }

这样就实现了底部和上面对齐的效果啦！

解释一下为什么我加了三个 i 标签

因为我的满行最多是五个div，底部多出一个div的时候，效果是没有影响的，当底部多出两个div的时候，显示在最前面和最后面的位置，这个不是我预期的效果，所以需要添加三个 i 标签来补齐，当底部是三个div的时候，同一行后面跟着两个 i 标签，下一行又有一个 i 标签，但是由于 i 标签没有高度，所以就和没有一样，视觉上就实现了我们想要的效果，无论页面的宽度怎么变，效果是不变的。（解释有点繁琐，不晓得大家有没有看懂，尽力了！）