首先功能是布局自动换行自动对齐。想要达到的效果是
或者是这样的:
或者说是这样的:
但是实际上得到的却是:
解决方法:
<div class="menu">
<div
class="menu-item"
v-for="(item, index) in item.menuList"
:key="index"
>
<div class="icon"></div>
<div class="m-i-name">
{{ item.name }}
</div>
</div>
</div>
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.menu-item {
display: inline-block;
flex: 1;
}
/*
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓解决方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
*/
/* 因为咱们是每行展示3个所以取3n, 下面的3n-1 ,3n-2 对应的为最后一行的div数量。
如果每行展示的是4个就4n-1,4n-2.... calc(100/每行的数量)
*/
/* 如果最后一行是2个元素 */
.menu-item:last-child:nth-child(3n - 1) {
margin-right: calc(33% + 3% / 3);
}
/* 如果最后一行是1个元素 */
.menu-item:last-child:nth-child(3n - 2) {
margin-right: calc(66% + 6% / 3);
}
}