间距 Space - Ant Design

何时使用

避免组件紧贴在一起，拉开统一的空间。

适合行内元素的水平间距。
可以设置各种水平对齐方式。
需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 antd@4.24.0 版本开始提供该组件）。

与 Flex 组件的区别

Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。

代码演示

Space

相邻组件水平间距。

Card

Card content

Card content

Card

Card content

Card content

Card

Card content

Card content

相邻组件垂直间距。

smallmiddlelargecustomize

使用 size 设置元素之间的间距，预设了 small、middle、large 三种尺寸，也可以自定义间距，若不设置 size，则默认为 small。

center

Block

start

Block

end

Block

baseline

Block

设置对齐模式。

自动换行。

相邻组件分隔符。

Zhejiang

Zhejianggggg

Option1

Option1-1

Option2-2

Between

Sign Up

Email

Select Address

leaf1

$

$

$

紧凑布局组合

使用 Space.Compact 让表单组件之间紧凑连接且合并边框。

Button 紧凑布局

Button 组件紧凑排列的示例。

垂直方向紧凑布局

垂直方向的紧凑布局，目前仅支持 Button 组合。

API

通用属性参考：通用属性

Space

参数	说明	类型	默认值	版本
align	对齐方式	`start` \| `end` \|`center` \|`baseline`	-	4.2.0
classNames	语义化 className	Record<SemanticDOM, string>	-
direction	间距方向	`vertical` \| `horizontal`	`horizontal`	4.1.0
size	间距大小	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0
split	设置分隔符	ReactNode	-	4.7.0
styles	语义化 style	Record<SemanticDOM, CSSProperties>	-
wrap	是否自动换行，仅在 `horizontal` 时有效	boolean	false	4.9.0

Size

'small' | 'middle' | 'large' | number

Space.Compact

自 antd@4.24.0 版本开始提供该组件。

需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：

Button
AutoComplete
Cascader
DatePicker
Input/Input.Search
InputNumber
Select
TimePicker
TreeSelect

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false	4.24.0
direction	指定排列方向	`vertical` \| `horizontal`	`horizontal`	4.24.0
size	子组件大小	`large` \| `middle` \| `small`	`middle`	4.24.0

Semantic DOM

item
5.6.0
包裹的子组件

主题变量（Design Token）

全局 Token如何定制？