1.容器设置

<div class="container">
  <div 
    v-for="(item, index) in paddedList" 
    :key="index" 
    class="item"
    :style="{ visibility: index < list.length ? 'visible' : 'hidden' }"
  >
    {{ item }}
  </div>
</div>

css

.container {
  display: flex;
  flex-wrap: wrap;  /* 允许换行 */
  gap: 10px;        /* 元素间距 */
}

2.子元素固定比例宽度
通过calc计算每项宽度，确保每行4个元素等宽：

.item {
  flex: 0 0 calc((100% - 30px) / 4); /* 总间隙为3个10px（4项间隔为3个） */
  background: #f0f0f0;
  height: 100px;
}

3.处理最后一行对齐
当元素数量不足4的倍数时，补充空元素占位并隐藏：

export default {
  data() {
    return {
      list: [...Array(13).keys()] // 示例数据（13个元素）
    }
  },
  computed: {
    paddedList() {
      const remainder = this.list.length % 4;
      return remainder === 0 
        ? this.list 
        : [...this.list, ...Array(4 - remainder).fill(null)];
    }
  }
};

关键优化点
动态补齐数据
通过paddedList计算属性补充空元素，使总数量达到4的倍数（如13→16），避免最后一行元素宽度拉伸异常15。

隐藏占位元素
通过:style="{ visibility: index < list.length ? 'visible' : 'hidden' }"隐藏占位元素，避免空白区域影响交互23。

间隙精确计算
calc((100% - 30px)/4)中30px对应3个间隔（每行4个元素有3个间隙）14。