来创建
row
中的 col
总和超过 24,那么多余的 col
会作为一个整体另起一行排列我们的栅格化系统基于 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
布局是基于 24 栅格来定义每一个『盒子』的宽度,但不拘泥于栅格。
import { NzGridModule } from 'ng-zorro-antd/grid';
加载中
加载中
加载中
加载中
sub-element align left
sub-element align center
sub-element align right
sub-element monospaced arrangement
sub-element align full
加载中
Align Top
col-4
col-4
col-4
col-4
Align Center
col-4
col-4
col-4
col-4
Align Bottom
col-4
col-4
col-4
col-4
加载中
加载中
Percentage columns
Fill rest
Raw flex style
加载中
加载中
加载中
加载中
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
[nzAlign] | 垂直对齐方式 | 'top' | 'middle' | 'bottom' | - |
[nzGutter] | 栅格间隔,可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24} 。或者使用数组形式同时设置 [水平间距, 垂直间距] 。 | string|number|object|[number, number]|[object, object] | - |
[nzJustify] | 水平排列方式 | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | - |
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
[nzFlex] | flex 布局属性 | string | number | - |
[nzOffset] | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | - |
[nzOrder] | 栅格顺序 | number | - |
[nzPull] | 栅格向左移动格数 | number | - |
[nzPush] | 栅格向右移动格数 | number | - |
[nzSpan] | 栅格占位格数,为 0 时相当于 display: none | number | - |
[nzXs] | <576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
[nzSm] | ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
[nzMd] | ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
[nzLg] | ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
[nzXl] | ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
[nzXXl] | ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | object | - |
响应式栅格的断点扩展自 BootStrap 4 的规则(不包含链接里 occasionally
的部分)。