如何解决flex布局的最后一行元素不靠左显示

示例

<div class="container">
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
</div>

.container{
  display: flex;
  justify-content: space-between;
}

效果

解决思路

1.将最后一个元素的margin-right设置为margin-right:auto

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
  margin-right: auto;
}

2.使用height:0宽度与flex中子项一样宽的元素进行填充

 <div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="xxx" v-for="i in 6" :key="i"></div>
  </div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  >.list {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  }
  >.xxx{
  width: 100px;
  }
}

3.使用grid布局吧，grid布局不存在这样的问题