间距 Space

Space 组件用于在组件之间添加统一的间距，简化布局代码。

何时使用

• 需要在多个组件之间添加统一间距时
• 希望简化布局代码，避免手动设置 margin 或 gap 时
• 需要灵活控制间距方向和大小时

示例

基础用法

最简单的 Space 组件使用方式。

间距方向

Space 组件支持水平和垂直两种方向。

水平方向（默认）

垂直方向

间距大小

Space 组件提供多种预设间距大小，也支持自定义数值。

小间距 (8px)

中间距 (16px) - 默认

大间距 (24px)

自定义间距 (32px)

间距大小对比

对齐方式

Space 组件支持多种对齐方式。

顶部对齐

居中对齐

底部对齐

基线对齐

对齐方式对比

自动换行

Space 组件支持自动换行功能。

自动换行

不换行

使用场景

按钮组

垂直表单布局

完整概览

API

Space Props

参数	说明	类型	默认值
align	对齐方式	'start' | 'end' | 'center' | 'baseline'	-
orientation	间距方向	'horizontal' | 'vertical'	'horizontal'
size	间距大小	'small' | 'middle' | 'large' | number	'middle'
wrap	是否自动换行（仅 horizontal 时有效）	boolean	false
children	子元素	ReactNode	-
className	自定义类名	string	-
style	自定义样式	CSSProperties	-

注意事项

1. Space 组件主要用于在组件之间添加统一的间距，简化布局代码
2. 通过 orientation 属性可以设置间距方向：
   • horizontal（默认）：水平方向添加间距
   • vertical：垂直方向添加间距
3. 通过 size 属性可以设置间距大小：
   • 预设值：'small'（8px）、'middle'（16px，默认）、'large'（24px）
   • 自定义数值：可以直接传入数字作为间距值（单位：px）
4. 通过 align 属性可以设置对齐方式：
   • 'start'：顶部对齐
   • 'center'：居中对齐
   • 'end'：底部对齐
   • 'baseline'：基线对齐
5. 通过 wrap 属性可以控制是否自动换行（仅在水平方向时有效）
6. Space 组件会自动过滤掉空的子元素（如 null、undefined 等）
7. Space 组件使用 CSS Flexbox 实现，具有良好的浏览器兼容性