flex布局space-between最后一行不能左对齐的一种解决方法

flex布局space-between最后一行不能左对齐的一种解决方法

在使用了flex布局，并设置的自动换行flex-wrap: wrap;，justify-content为 space-between的时候就可能会出现下面这些情况

我们要实现这种效果

正常的代码:

<div class="list">
   <div class="item" v-for="item in 14" >{{ item }}</div>
</div>
<style>
.list{
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.item{
  padding: 10px;
  width:90px;
  border: 1px solid red;
}
</style>

解决方法

在末尾添加几个占位的元素，占位内容的宽度需要和元素的宽度一致，高度为零，个数需要超过一行最大的元素个数进行，超出也没问题，因为高度为零所以并不会把外层盒子撑高

全部代码:

<div class="list">
  <div class="item" v-for="item in 14" >{{ item }}</div>
  <!-- 占位数量需要超过一行最大的元素个数 -->
  <div class="seat" v-for="item in 5"></div>
</div>
<style>
.list{
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.item{
  padding: 10px;
  width:90px;
  border: 1px solid red;
}
.seat{
  /* 占位内容的宽度需要和元素的宽度一致，高度为零 */
  width: 90px;
  height: 0;
}
</style>