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{
   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{
   49%;
  display: flex;
  align-items: center;
  padding: 15px 0px 10px 5px;
  background-color: #F8F8F8;
  margin-bottom: 10px;
}