el-space标签可以很方便的设置标签间距和分隔符,对齐方式,是否拆行等属性。
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const size=ref(30)
</script>
<template>
<el-space wrap :size="size" spacer="" alignment="flex-end" fill="true">
<div class="container" v-for="i in 3" :key="i">
<p v-for="item in 3" class="item" :key="item">
{{ 'i am'+ item }}
</p>
</div>
</el-space>
</template>
<style scoped>
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.item{
background-color: lightskyblue;
margin:10px 10px;
text-align: center;
border: 1px solid black;
}
</style>
size:决定子元素间距大小,默认有三个规格small,default,large,还可设置具体的数值。
wrap:是否拆行,
fill:子元素是否自动填充父容器
https://element-plus.org/zh-CN/component/space.html