在display:flex布局的情况下,justify-content:space-between。当一行可以容纳三个元素,并且一行只有两个元素的情况,这两个元素会进行两端排列
解决方案
给循环的外层样式 class="specialMain"加上after伪类,其中width为每一个元素的宽度
<van-row class="specialMain">
<van-col span="7" :class="getClass(index)" v-for="(item,index) in menuList" :key="item.officialAccountMenuId" @click="toPath({path:item.path})">
<span style="margin-top: 12px;">{{ item.officialAccountMenuName }}</span>
<span style="font-size: 11px;font-weight: 400;">{{ item.remark }}</span>
</van-col>
</van-row>
.specialMain::after{
content: "";
width: 32.2%;
}
.specialMain{
justify-content: space-between;
padding: 0.5rem 0.5rem 0;
}