display+v-for 的排列问题

 

实现如此的效果

<div class="menu">

<div class="menuItem" v-for='(item,index) of menuList' :key="index">
<img :src="item.img">
<div>{{item.name}}</div>
</div>

</div>

对应的css:
.menu{
display: flex;
align-items: center;

}

.menuItem{
width: 33%;
}


如果要实现图2

<div class="menu">

<div class="menuItem" v-for='(item,index) of menu' :key="index" @click="goToItem(item.id)">

<img :src="item.img"><span class="blackFont">{{item.name}}</span>

</div>

</div>

css 部分
.menu{
display: flex;
flex-wrap: wrap; /*flex 可以自动换行,这个属性很重要*/
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

.menuItem{
width: 49%;
display: flex;
align-items: center;
padding: 15px 0px 10px 5px;
background-color: #F8F8F8;
margin-bottom: 10px;
}

小码助力平台致力于为初入职场的IT小白,

解决工作中遇到的工作难题。

节约无效搜索时间,助力渡过试用期。

目前开放的技术领域(web前端+java)

如您有需要,欢迎联系我们 。

微信:18062748486

如加微信,请备注“IT问题解决”

 

posted on 2020-07-07 16:29  艾小码  阅读(392)  评论(0编辑  收藏  举报

导航