间距 Space - Ant Design

设置组件之间的间距。

何时使用

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

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

与 Flex 组件的区别

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

代码演示

Space

基本用法

相邻组件水平间距。

Card

Card content

Card

Card content

Card

Card content

垂直间距

相邻组件垂直间距。

smallmiddlelargecustomize

间距大小

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

center

Block

start

Block

end

Block

baseline

Block

对齐

设置对齐模式。

自动换行

自动换行。

Link

分隔符

相邻组件分隔符。

Zhejiang

Zhejianggggg

Option1

Option1-1

Option2-2

Between

Select Address

leaf1

紧凑布局组合

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

Button 紧凑布局

Button 组件紧凑排列的示例。

垂直方向紧凑布局

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

API

通用属性参考：通用属性

Space

参数	说明	类型	默认值	版本
align	对齐方式	`start` \| `end` \|`center` \|`baseline`	-	4.2.0
direction	间距方向	`vertical` \| `horizontal`	`horizontal`	4.1.0
size	间距大小	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0
split	设置拆分	ReactNode	-	4.7.0
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

`styles` 和 `classNames` 属性

名称	说明	版本
item	设置 `Space` 包裹的子组件	5.6.0

Ant Design

Space
间距

何时使用

与 Flex 组件的区别

代码演示

API

Space

Size

Space.Compact

`styles` 和 `classNames` 属性

主题变量（Design Token）

全局 Token如何定制？

Space间距更新日志

何时使用

与 Flex 组件的区别

代码演示

API

Space

Size

Space.Compact

styles 和 classNames 属性

主题变量（Design Token）

全局 Token如何定制？

Space
间距

`styles` 和 `classNames` 属性