文章目錄

• • Grid 柵格
  • Space 間距

Grid 柵格

Ant Design Vue 將整個設(shè)計建議區(qū)域按照 24 等分的原則進行劃分，劃分之后的信息區(qū)塊我們稱之為『盒子』。建議橫向排列的盒子數(shù)量最多四個，最少一個?！汉凶印辉谡麄€屏幕上占比見上圖。設(shè)計部分基于盒子的單位定制盒子內(nèi)部的排版規(guī)則，以保證視覺層面的舒適感。

布局的柵格化系統(tǒng)，我們是基于行（row）和列（col）來定義信息區(qū)塊的外部框架，以保證頁面的每個區(qū)域能夠穩(wěn)健地排布起來。下面簡單介紹一下它的工作原理：

• 通過row在水平方向建立一組column（簡寫col）
• 你的內(nèi)容應(yīng)當放置于col內(nèi)，并且，只有col可以作為row的直接元素
• 柵格系統(tǒng)中的列是指 1 到 24 的值來表示其跨越的范圍。例如，三個等寬的列可以使用 <a-col :span="8" />來創(chuàng)建
• 如果一個row中的col總和超過 24，那么多余的col會作為一個整體另起一行排列

柵格化系統(tǒng)支持Flex布局，允許子元素在父節(jié)點內(nèi)的水平對齊方式 - 居左、居中、居右、等寬排列、分散排列。子元素與子元素之間，支持頂部對齊、垂直居中對齊、底部對齊的方式。同時，支持使用 order來定義元素的排列順序。

Flex 布局是基于 24 柵格來定義每一個『盒子』的寬度，但不拘泥于柵格。

基礎(chǔ)柵格

<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個『盒子』的占比個數(shù)。

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>

區(qū)塊間隔
柵格常常需要和間隔進行配合，你可以使用 Row 的 gutter 屬性，我們推薦使用 (16+8n)px作為柵格間隔。
如果要支持響應(yīng)式，可以寫成{ xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直間距，可以寫成數(shù)組形式[水平間距, 垂直間距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

左右偏移
使用 offset可以將列向右側(cè)偏。例如，:offset="4"將元素向右側(cè)偏移了 4 個列（column）的寬度。

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

響應(yīng)式

<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	柵格間隔，可以寫成像素值或支持響應(yīng)式的對象寫法來設(shè)置水平間隔 { xs: 8, sm: 16, md: 24}?；蛘呤褂脭?shù)組形式同時設(shè)置 [水平間距, 垂直間距]

Col API

屬性說明

flex	flex 布局填充
offset	柵格左側(cè)的間隔格數(shù)，間隔內(nèi)不可以有柵格
order	柵格順序，flex 布局模式下有效
pull	柵格向左移動格數(shù)
push	柵格向右移動格數(shù)
span	柵格占位格數(shù)
xs	<576px響應(yīng)式柵格
sm	≥576px 響應(yīng)式柵格
md	≥768px 響應(yīng)式柵格
lg	≥992px 響應(yīng)式柵格
xl	≥1200px 響應(yīng)式柵格
xxl	≥1600px 響應(yīng)式柵格

Space 間距

避免組件緊貼在一起，拉開統(tǒng)一的空間。

• 適合行內(nèi)元素的水平間距。
• 可以設(shè)置各種水平對齊方式。

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的【Ant Design Vue】之Grid栅格和Space间距的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。