相信大家都会遇到这种问题，在flex布局中，最后一样的显示不尽如意，效果如下
想要最有一行左对齐那么就需要在最后面加一个元素就可以把整个屏幕撑开达到想要的效果，那么问题来了，如果是后台请求回来的数据的话，怎么能知道需要加几个元素呢？那么就需要添加判断了，代码如下
<template>
<div class="about">
<div class="category">
<span v-for="(data,index) in dataList" :key="index">
{{data}}
</span>
<span v-if="(3 - dataList.length % 3) != 3">
<span v-for="item in 3 - dataList.length % 3" :key="item"></span>
</span>
</div>
</div>
</template>
最终结果如下
我们只需要把最后循环的隐藏掉或者透明度降到最低即可
这段代码的精髓在这里
<span v-if="(3 - dataList.length % 3) != 3">
<span v-for="item in 3 - dataList.length % 3" :key="item"></span>
</span>
如果一行就只有三个的话，那么也可以简写为
<span v-if="(dataList.length % 3) == 2">
<span></span>
</span>
这么写也可以实现，只适用于三个情况。
v-if="(3 - dataList.length % 3) != 3
这个判断的意思是，数据的长度和3取余，得到的是最后一行剩余几个元素，3减去余数，就是需要添加的元素，不等于3意思就是如果余数正浩等于0，那么就不用添加了。
<span v-for="item in 3 - dataList.length % 3" :key="item"></span>这段代码循环就是需要加几个标签，才能达到最终想要的效果。
完整代码
<template>
<div class="about">
<div class="category">
<span v-for="(data,index) in dataList" :key="index">{{data}}</span>
<span v-if="(3 - dataList.length % 3) != 3" class="visibility">
<span v-for="item in 3 - dataList.length % 3" :key="item"></span>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
"视觉设计师",
"UI设计师",
"平面设计师",
"交互设计师",
"设计总监",
],
};
},
};
</script>
<style lang="less">
.category{
padding: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
span{
width: 30%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
background: #e5e5e5;
margin-top: 10px;
}
span.visibility{
visibility: hidden;
}
}
</style>
最终效果：
