1.什么是GIT栅格
Ant Design Vue 需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计建议区域按照 24 等分的原则进行划分
1.概述
布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:
- 通过
row
在水平方向建立一组column
(简写col) - 你的内容应当放置于
col
内,并且,只有col
可以作为row
的直接元素 - 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如,三个等宽的列可以使用
<a-col :span="8" />
来创建 - 如果一个
row
中的col
总和超过 24,那么多余的col
会作为一个整体另起一行排列 - (如上述代码和图片所示,将一行(a-row) 分为两列 (a-col) 每一列占了12个栅格。
2.Grid 栅格中的flex布局
概述:
我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度,但不拘泥于栅格。
1.对齐
(水平居中,垂直是顶部对齐)
(水平平分间隔空间,水平居中)
(水平两边对齐,其余平分间隔空间,垂直底部对齐)
2.排序
我们不难发现,通过组件自带的order属性,可以控制排序顺序。
3.布局
使用 row-flex
定义 flex
布局,其子元素根据不同的值 start
,center
,end
,space-between
,space-around
,分别定义其在父节点里面的排版方式。
(start开始的意思,顾名思义就是从头开始布局)
(center中心对齐)
(end尾部对其)
(space-between 两边对齐,间隔平分)
(space-around间隔平分)
f4.flex填充
(将所有24栅格利用flex布局分成了三五等分)
(将一行分为两列,第一列占100px,后续则会填满)
(这里面flex的三个属性分别是,放大比例,缩小比例,主轴空间),直白一点说放大比例就是把一行的页面等比列分配,而缩小比例就是当页面不足时等比例缩小,比如当所有的子元素都设置为1,那么页面缩小时,他们会相应的等比列缩小,当有一个设置为0时,那它就不会等比例缩小了,而主轴空间则是为了计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
5.间隔
栅格常常需要和间隔进行配合,你可以使用 Row
的 gutter
属性,我们推荐使用 (16+8n)px
作为栅格间隔。(n 是自然数)
如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }
。
如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距]
[16, { xs: 8, sm: 16, md: 24, lg: 32 }]
。
6.例偏移
使用 offset
可以将列向右侧偏。例如,:offset="4"
将元素向右侧偏移了 4 个列(column)的宽度。
(下图是将元素偏移了8个列的单位(8个栅格))
7.响应式栅格
xs | <576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object | - |
sm | ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object | - |
md | ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object | - |
lg | ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object | - |
xl | ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object | - |
xxl | ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number|object |
8.列排序