文章目錄

• • 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间距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。