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

最新推荐文章于 2025-03-07 15:52:25 发布

Pabingo

最新推荐文章于 2025-03-07 15:52:25 发布

阅读量596

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/u014446094/article/details/130281876

版权

前端专栏收录该内容

10 篇文章

订阅专栏

文章展示了一个使用Vue.js的v-for指令进行列表渲染的例子，数据源是一个名为listItem的接口数组。每个item包含name属性。内容中还涉及到CSSFlexbox布局，用于创建一个800px宽的容器，内部包含六个宽度自适应并间距20px的box元素，每个box显示listItem的name属性值，背景色为skyblue，边框为红色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

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;
}