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

Grid 栅格

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

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

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

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

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

基础栅格

<a-row>
  <a-col :span="12">col-12a-col>
  <a-col :span="12">col-12a-col>
a-row>
<a-row>
  <a-col :span="8">col-8a-col>
  <a-col :span="8">col-8a-col>
  <a-col :span="8">col-8a-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-4a-col>
  <a-col :span="6" :order="3">2 col-order-3a-col>
  <a-col :span="6" :order="2">3 col-order-2a-col>
  <a-col :span="6" :order="1">4 col-order-1a-col>
a-row>

Flex 子元素填充

<a-row type="flex">
  <a-col :flex="2">2 / 5a-col>
  <a-col :flex="3">3 / 5a-col>
a-row>
<a-row type="flex">
  <a-col flex="100px">100pxa-col>
  <a-col flex="auto">autoa-col>
a-row>
<a-row type="flex">
  <a-col flex="1 1 200px">1 1 200pxa-col>
  <a-col flex="0 1 300px">0 1 300pxa-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-8a-col>
  <a-col :span="8" :offset="8">col-8a-col>
a-row>

响应式

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

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

<a-row>
  <a-col :span="18" :push="6">col-18 col-push-6a-col>
  <a-col :span="6" :pull="18">col-6 col-pull-18a-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">Primarya-button>
  <a-button>Defaulta-button>
  <a-button type="dashed">Dasheda-button>
  <a-button type="link">Linka-button>
a-space>

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