【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)

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的【Ant Design Vue】之Grid栅格和Space间距的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。