Space
间距

设置组件之间的间距。
使用import{ Space }from"antd";

何时使用

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

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

与 Flex 组件的区别

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

代码演示

Space

相邻组件水平间距。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Card

Card content

Card content

Card

Card content

Card content

Card

Card content

Card content

相邻组件垂直间距。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
center
Block
start
Block
end
Block
baseline
Block

设置对齐模式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

自动换行。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

相邻组件分隔符。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Zhejiang
Option1
Option1-1
Option2-2
Between
Sign Up
Select Address
$
$
$

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


Button 组件紧凑排列的示例。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Space

参数说明类型默认值版本
align对齐方式start | end |center |baseline-4.2.0
classNames语义化 classNameRecord<SemanticDOM, string>-
direction间距方向vertical | horizontalhorizontal4.1.0
size间距大小Size | Size[]small4.1.0 | Array: 4.9.0
split设置分隔符ReactNode-4.7.0
styles语义化 styleRecord<SemanticDOM, CSSProperties>-
wrap是否自动换行,仅在 horizontal 时有效booleanfalse4.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将宽度调整为父元素宽度的选项booleanfalse4.24.0
direction指定排列方向vertical | horizontalhorizontal4.24.0
size子组件大小large | middle | smallmiddle4.24.0

Semantic DOM

  • root
    6.0.0
    根元素
  • item
    5.6.0
    包裹的子组件

主题变量(Design Token)

全局 Token如何定制?