---
url: /components/space.md
---
# Space 间距

间距组件：基于 CSS gap 为子元素插入统一间隔，避免逐个写 margin。默认插槽的子节点会被平铺并各自包裹为独立 item（跳过注释与空白文本节点，Fragment 也会展开），因此 v-for 生成的元素同样生效。容器默认 `inline-flex`，`fill` 时变为块级 flex。

## 基础用法

相邻按钮之间自动插入默认间距（small = 8px）。

## 间距尺寸

`size` 支持枚举（small = 8px / default = 12px / large = 16px）、数字（px）与 `[水平, 垂直]` 数组，可精确控制两个方向的不同间距。

## 垂直排列

`direction` 为 vertical 时改为纵向排布，适合表单行、列表项之间的间隔。

## 自动换行

`wrap` 开启 flex 换行，子项数量多或宽度不定时（如标签组、筛选条件）避免溢出。

## 对齐方式

`alignment` 设置交叉轴对齐：start / end / center / baseline；行内混排图标、文本、按钮等不同高度元素时用于统一基线。

## 撑满容器

`fill` 让每个子项 `flex: 1` 平分剩余空间（容器变为块级 flex），适合按钮组、分段操作条铺满整行。

## API