24 栅格系统。
在多数业务情况下,Ant Design需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计建议区域按照 24 等分的原则进行划分。
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个,最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。
布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:
通过row
在水平方向建立一组column
(简写col)
你的内容应当放置于col
内,并且,只有col
可以作为row
的直接元素
栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽的列可以使用.col-8
来创建
如果一个row
中的col
总和超过 24,那么多余的col
会作为一个整体另起一行排列
我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度,但排版则不拘泥于栅格。
从堆叠到水平排列。
使用单一的一组 nz-row
和 nz-col
栅格组件,就可以创建一个基本的栅格系统,所有列(nz-col)必须放在
nz-row
内。
栅格常常需要和间隔进行配合,你可以使用 nz-row
的 nzGutter
属性,我们推荐使用 (16+8n)px
作为栅格间隔。
列偏移
使用 nzOffset
可以将列向右侧偏。例如,[nzOffset]="'4'"
将元素向右侧偏移了 4 个列(column)的宽度。
列排序
使用 nzPull
和 nzPush
类就可以很容易的改变列(column)的顺序。
Flex布局基础
使用 [nzType]="'flex'"
定义 flex
布局,其子元素根据 [nzJustify]
不同的值
start
,center
,end
,space-between
,space-around
,分别定义其在父节点里面的排版方式。
Flex 子元素垂直对齐。
通过 Flex 布局的 Order 来改变元素的排序。
参照 Bootstrap 的
响应式设计
,预设四个响应尺寸:xs
sm
md
lg
xl
。
span
pull
push
offset
order
属性可以通过内嵌到 nzXs
nzSm
nzMd
nzLg
nzXl
属性中来使用。
其中 [nzXs]="6"
相当于 nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}}
可以简单配置几种等分栅格和间距。
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzGutter | 栅格间隔 | Number | 0 |
nzType | 布局模式,可选 flex ,现代浏览器下有效 |
String | |
nzAlign | flex 布局下的垂直对齐方式:top middle bottom |
String | top |
nzJustify | flex 布局下的水平排列方式:start end center space-around
space-between
|
String | start |
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzSpan | 栅格占位格数,为 0 时相当于 display: none |
Number | - |
nzOrder | 栅格顺序,flex 布局模式下有效 |
Number | 0 |
nzOffset | 栅格左侧的间隔格数,间隔内不可以有栅格 | Number | 0 |
nzPush | 栅格向右移动格数 | Number | 0 |
nzPull | 栅格向左移动格数 | Number | 0 |
nzXs | <768px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number|Object | - |
nzSm | ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number|Object | - |
nzMd | ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number|Object | - |
nzLg | ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number|Object | - |
nzXl | ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number|Object | - |