基本用法
<template>
<el-space>
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，<el-space> 包裹了三个按钮组件，它们之间默认会有一定的间距。
设置间距大小
你可以使用 size 属性来设置间距的大小，支持以下几种值：small、medium、large，以及具体的像素值。
<template>
<el-space :size="20">
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，按钮之间的间距被设置为 20 像素。
<template>
<el-space size="small">
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，按钮之间的间距被设置为小尺寸（small）。
设置对齐方式
你可以使用 direction 属性来设置子元素的排列方向，支持以下几种值：horizontal、vertical。
<template>
<el-space direction="vertical">
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，按钮将垂直排列。
设置对齐方式
你可以使用 align 属性来设置子元素的对齐方式，支持以下几种值：start、center、end、baseline。
<template>
<el-space align="end">
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，按钮将在纵轴上居右对齐。
设置子元素的垂直对齐方式
你可以使用 vertical-align 属性来设置子元素的垂直对齐方式，支持以下几种值：top、middle、bottom。
<template>
<el-space vertical-align="bottom">
<el-button>按钮一</el-button>
<el-button>按钮二</el-button>
<el-button>按钮三</el-button>
</el-space>
</template>
在上述例子中，按钮将在横轴上居底对齐。
以上是 Element Plus 中关于 <el-space> 的基本使用说明。通过调整 size、direction、align 和 vertical-align 属性，你可以实现不同样式的元素布局。详细的配置选项可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/space)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5525/ElementPlus