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问题解决”