Avoid components clinging together and set a unified space.
Use <nz-space-compact> when child form components are compactly connected and the border is collapsed.

The difference with Flex component is:

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#

Basic Usage

Crowded components horizontal spacing.

      Loading...

Card

Card content

Card

Card content

Vertical Space

Crowded components vertical spacing.

      Loading...

SmallMiddleLarge

Link

Space Size

large, middle and small preset sizes.

Set the nzSize to large and middle by setting size to large and middle respectively. If size is not set, the spacing is small.

      Loading...

center

Block

start

Block

end

Block

baseline

Block

Align

Config item align.

      Loading...

Link

Customize Size

Custom spacing size.

      Loading...

Wrap

Auto wrap line.

      Loading...

Link

Split

Crowded components split.

      Loading...

Zhejianggggg

Option1

Option1-1

Option1-2

Between

Please select

leaf 1-0-0

Http://.com

Compact Mode

Compact Mode for form component.

      Loading...

Button Compact Mode

Button component compact example.

      Loading...

Vertical Compact Mode

Vertical Mode for Space.Compact, support Button only.

      Loading...

API#

nz-spacecomponent#

Property	Description	Type	Default	Global Config
`[nzSize]`	The space size	`NzSpaceSize \| NzSpaceSize[]`	`'small'`	✅
`[nzDirection]`	The space direction	`'vertical' \| 'horizontal'`	`'horizontal'`
`[nzAlign]`	Align items	`'start' \| 'end' \| 'baseline' \| 'center'`	-
`[nzWrap]`	Auto wrap line, when `horizontal` effective	`boolean`	`false`
`[nzSplit]`	Set split	`TemplateRef \| string`	-

Interfaces#

type NzSpaceSize = 'small' | 'middle' | 'large' | number;

nz-space-compactcomponent#

Use <nz-space-compact> when child form components are compactly connected and the border is collapsed. The supported components are：

Button
Cascader
DatePicker
Input
Select
TimePicker
TreeSelect

参数	说明	类型	默认值
`[nzBlock]`	Option to fit width to its parent's width	`boolean`	`false`
`[nzDirection]`	Set direction of layout	`'vertical' \| 'horizontal'`	`'horizontal'`
`[nzSize]`	Set child component size	`'large' \| 'small' \| 'default'`	`'default'`