最后一样被均分了 没有靠左
时间: 2023-12-23 12:30:41 浏览: 28
如果您希望最后一行的元素靠左对齐而不是均分,您可以进行如下修改:
```html
<template>
<div class="container">
<div class="item" v-for="(item, index) in items" :key="index" :style="getFlexStyle(index)">{{ item }}</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5],
columns: 3 // 每行展示的列数
};
},
computed: {
getFlexStyle() {
return index => {
const flexBasis = 100 / this.columns + "%";
const marginLeft = (index % this.columns === 0) ? 0 : "auto";
return {
flexBasis,
marginLeft
};
};
}
}
};
</script>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
}
</style>
```
在上述代码中,我们对计算属性`getFlexStyle`进行了修改。我们使用索引`index`来判断每个元素是否是每行的第一个元素,如果是,则将`marginLeft`设置为0,否则将其设置为`auto`。这样,最后一行的元素就会靠左对齐。
请注意,这里假设每个元素的宽度相等,如果元素的宽度不同,您可能需要根据具体情况进行调整。