根据接口获取得数据，布局两列多行的代码写法

红豆黄豆小甜豆

已于 2023-02-01 20:24:36 修改

阅读量124

点赞数

文章标签：前端 javascript css css3 html

于 2023-02-01 20:21:26 首次发布

本文链接：https://blog.csdn.net/weixin_60035749/article/details/128839969

版权

html代码

<div class="template-fa">
    <div class="template" v-for="(item,index) in templateList" :key="index">
        <div @click="handleTemplate(item)" 
           :class="templateId === item.id ? 'template-selected-img':''" 
        >
            <img :src="item.templateUrl" class="template-img" >
        </div>
    </div>
</div>

css代码

// 父元素
.template-fa {
// 表示自成一行
  display: flex;
  // 根据item的大小自动排列
  flex-wrap: wrap;
  // CSS gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式。
  gap: 10*$w;
  margin-left: 10*$w;
}

// 给每一个 item 设置宽度
.template {
  // box-sizing: border-box;
  // 宽度默认是 100% ，给每个元素设置宽度设置为48%，自动会变成两列
  width: 48%;
  margin: 1*$w;
}

最终效果如下：