Space - Ant Design

When To Use

Avoid components clinging together and set a unified space.
Use Space.Compact when child form components are compactly connected and the border is collapsed (After version antd@4.24.0 Supported).

Difference with Flex component

Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
align	Align items	`start` \| `end` \|`center` \|`baseline`	-	4.2.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props: SpaceProps })=> Record<SemanticDOM, string>	-
~~direction~~	The space direction	`vertical` \| `horizontal`	`horizontal`	4.1.0
orientation	The space direction	`vertical` \| `horizontal`	`horizontal`
size	The space size	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0
~~split~~	Set split, please use `separator` instead	ReactNode	-	4.7.0
separator	Set separator	ReactNode	-	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>	-
vertical	Orientation, Simultaneously configure with `orientation` and prioritize `orientation`	boolean	false	-
wrap	Auto wrap line, when `horizontal` effective	boolean	false	4.9.0

Size

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

Space.Compact

Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are：

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

Property	Description	Type	Default	Version
block	Option to fit width to its parent's width	boolean	false	4.24.0
~~direction~~	Set direction of layout	`vertical` \| `horizontal`	`horizontal`	4.24.0
orientation	Set direction of layout	`vertical` \| `horizontal`	`horizontal`
vertical	Orientation, Simultaneously configure with `orientation` and prioritize `orientation`	boolean	false	-
size	Set child component size	`large` \| `middle` \| `small`	`middle`	4.24.0

Semantic DOM

Design Token

Global TokenHow to use?