解决flex布局space-between最后一行不居左对齐问题

大家在使用flex布局，justify-content: space-between的时候经常会遇到一种情况就是当最后一行的盒子个数大于1的时候不能完美排列的问题，网上也有很多种解决方法。但都不是很满意，于是我就思考出了这种方式：就是在循环完数据之后，再添加n个高度为零，与排列项等宽的盒子，就能让justify-content: space-between继续生效，而由于添加的盒子没有高度，所以在页面中不会显示。

解决之前：

解决之后：

代码如下：

    <div class="container-main">
      <div
        class="children"
        v-for="(item, index) in items"
        :key="item.id"
      >
        <img :src="item.imageUrl" alt="" />
        <div>{{ item.title }}</div>
      </div>
      <!--解决最后一个元素不居左排列-->
      <div style="width: 23%; height: 0" v-for="n in 10" :key="n"></div>
    </div>

注意：宽度需要与上方的div宽度一致，循环的数字由最屏宽时上方div一行能展示多少个决定，比如最大屏宽最多6个一行 则为6 。

希望能对大家有所帮助~