【Ant Design Vue】之Grid栅格和Space间距

文章目录

Grid 栅格
Space 间距

Grid 栅格

Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分，划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

通过row在水平方向建立一组column（简写col）
你的内容应当放置于col内，并且，只有col可以作为row的直接元素
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <a-col :span="8" />来创建
如果一个row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列

栅格化系统支持Flex布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order来定义元素的排列顺序。

Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。

基础栅格

<a-row><a-col :span="12">col-12</a-col><a-col :span="12">col-12</a-col>
</a-row>
<a-row><a-col :span="8">col-8</a-col><a-col :span="8">col-8</a-col><a-col :span="8">col-8</a-col>
</a-row>

span的值就是基于24个『盒子』的占比个数。

Flex 子元素水平垂直对齐

<!-- 水平居中 垂直居上 -->
<a-row type="flex" justify="center" align="top">
<!-- 水平等距 垂直居中 -->
<a-row type="flex" justify="space-around" align="middle">
<!-- 水平靠边分散 垂直居下 -->
<a-row type="flex" justify="space-between" align="bottom">

Flex 排序

<a-row type="flex"><a-col :span="6" :order="4">1 col-order-4</a-col><a-col :span="6" :order="3">2 col-order-3</a-col><a-col :span="6" :order="2">3 col-order-2</a-col><a-col :span="6" :order="1">4 col-order-1</a-col>
</a-row>

Flex 子元素填充

<a-row type="flex"><a-col :flex="2">2 / 5</a-col><a-col :flex="3">3 / 5</a-col>
</a-row>
<a-row type="flex"><a-col flex="100px">100px</a-col><a-col flex="auto">auto</a-col>
</a-row>
<a-row type="flex"><a-col flex="1 1 200px">1 1 200px</a-col><a-col flex="0 1 300px">0 1 300px</a-col>
</a-row>

区块间隔
栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px作为栅格间隔。
如果要支持响应式，可以写成{ xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距，可以写成数组形式[水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

左右偏移
使用 offset可以将列向右侧偏。例如，:offset="4"将元素向右侧偏移了 4 个列（column）的宽度。

<a-row><a-col :span="8">col-8</a-col><a-col :span="8" :offset="8">col-8</a-col>
</a-row>

响应式

<a-row><a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col><a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col><a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
</a-row>
<a-row><a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col><a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col><a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
</a-row>

栅格排序
通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。

<a-row><a-col :span="18" :push="6">col-18 col-push-6</a-col><a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
</a-row>

Row API

属性	说明
align	flex 布局下的垂直对齐方式：`top`/`middle`/ `bottom`
justify	flex 布局下的水平排列方式：`start`/`end`/ `center`/ `space-around`/ `space-between`
type	布局模式，可选`flex`
gutter	栅格间隔，可以写成`像素值`或支持响应式的`对象`写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用`数组`形式同时设置 `[水平间距, 垂直间距]`

Col API

属性	说明
flex	flex 布局填充
offset	栅格左侧的间隔格数，间隔内不可以有栅格
order	栅格顺序，`flex` 布局模式下有效
pull	栅格向左移动格数
push	栅格向右移动格数
span	栅格占位格数
xs	`<576px`响应式栅格
sm	≥576px 响应式栅格
md	`≥768px` 响应式栅格
lg	`≥992px` 响应式栅格
xl	`≥1200px` 响应式栅格
xxl	≥1600px 响应式栅格

Space 间距

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

适合行内元素的水平间距。
可以设置各种水平对齐方式。

<a-space :size="size"><a-button type="primary">Primary</a-button><a-button>Default</a-button><a-button type="dashed">Dashed</a-button><a-button type="link">Link</a-button>
</a-space>

属性	说明
align	对齐方式 (`start` \| `end`\|`center` \|`baseline`)
direction	间距方向 (`vertical` \| `horizontal`)
size	间距大小(`small` \| `middle` \| `large` \| `number`)