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;
}
最终效果如下: