【Ant Design Vue】之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

Col API

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>