Space间距

设置组件之间的间距。

何时使用#

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

  • 适合行内元素的水平间距。
  • 可以设置各种水平对齐方式。
import { NzSpaceModule } from 'ng-zorro-antd/space';

代码演示

基本用法

相邻组件水平间距。

expand codeexpand code
加载中
Card

Card content

Card content

Card

Card content

Card content

垂直间距

相邻组件垂直间距。

可以设置 width: 100% 独占一行。

expand codeexpand code
加载中
Link
间距大小

间距预设大、中、小三种大小。

通过设置 nzSize 为 largemiddle 分别把间距设为大、中间距。若不设置 nzSize，则间距为小。

expand codeexpand code
加载中
center
Block
start
Block
end
Block
baseline
Block
对齐

设置对齐模式。

expand codeexpand code
加载中
Link
自定义尺寸

自定义间距大小。

expand codeexpand code
加载中
Link
Link
Link
分隔符

相邻组件分隔符。

expand codeexpand code
加载中

API#

nz-space#

参数说明类型默认值支持全局配置
[nzSize]间距大小'small' | 'middle' | 'large' | number'small'✅
[nzDirection]间距方向'vertical' | 'horizontal'horizontal
[nzAlign]对齐方式'start' | 'end' | 'baseline' | 'center'-
[nzWrap]是否自动换行，仅在 horizontal 时有效booleanfalse
[nzSplit]设置分隔符TemplateRef-