循环列表使 flex 固定一行2列自适应

效果

interface listItem {
  name: string;
}
const list: listItem[] = [
      {
        name: '1'
      },
      {
        name: '2'
      },
      {
        name: '3'
      },
      {
        name: '4'
      },
      {
        name: '5'
      },
      {
        name: '6'
      }
    ]
    

  <div class="home">
    <div v-for="(item, index) in list" :key="index" class="box">
      {{ item.name }}
    </div>
  </div>

.home {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  width: calc(50% - 10px); // 中间间隔20px
  height: 50px;
  background-color: skyblue;
  border: 1px solid red;
  box-sizing: border-box;
}