Space 间距

给一组元素之间统一加间距。基于 flex 加 gap，不产生多余的包裹层。

基础用法

标签一标签二标签三

<SrSpace>
  <SrTag>标签一</SrTag>
  <SrTag>标签二</SrTag>
  <SrTag>标签三</SrTag>
</SrSpace>

为什么用 gap 而不是给子元素加 margin

早期实现常给每个子元素加 margin-right，再给最后一个去掉。这样有两个问题：

1. 子元素自身可能也有 margin，两者会叠加，间距变得不可预测；
2. 换行后最后一行仍有残留间距，右边缘看起来是歪的。

gap 由浏览器保证「只在相邻元素之间」，换行也正确， 且不需要知道有几个子元素。

方向

纵向排列每一项各占一行align="stretch" 让它们等宽

<SrSpace direction="vertical" align="stretch">
  <SrTag>纵向排列</SrTag>
  <SrTag>每一项各占一行</SrTag>
</SrSpace>

间距档位

六档离散值（xs / sm / md / lg / xl）加直接传数字。 离散档位让同一页面里的间距保持一致，避免出现 13px 与 14px 混用。

xs间距很小

md默认档位

xl间距很大

<SrSpace size="xs">…</SrSpace>
<SrSpace size="md">…</SrSpace>
<SrSpace size="xl">…</SrSpace>

<!-- 需要精确值时直接传数字，按 px 处理 -->
<SrSpace :size="13">…</SrSpace>

对齐

align 控制交叉轴对齐（纵向排列时即水平方向），justify 控制主轴对齐。 两者对应 flex 的 align-items 与 justify-content。

左侧两端对齐

<SrSpace justify="space-between" align="center">
  <SrTag>左侧</SrTag>
  <SrTag variant="primary">两端对齐</SrTag>
</SrSpace>

align="baseline" 在混排不同字号的文字时很有用——按基线对齐， 比按中心对齐看起来整齐得多。

换行

默认允许换行。wrap="false" 会强制单行，超出的内容需要自己处理溢出。

这一组标签会自动换行因为容器不够宽

<SrSpace>…</SrSpace>
<SrSpace :wrap="false">…</SrSpace>

Props

名称	类型	默认值	说明
direction	'horizontal' | 'vertical'	'horizontal'	排列方向
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | number	'md'	间距，数字按 px 处理
align	'start' | 'center' | 'end' | 'baseline' | 'stretch'	'center'	交叉轴对齐
justify	'start' | 'center' | 'end' | 'space-between'	'start'	主轴对齐
wrap	boolean	true	是否允许换行

插槽

名称	说明
default	需要加间距的内容，每个直接子元素被视作一项