設(shè)計理念

100%

25%

25%

25%

25%

33.33%

33.33%

33.33%

50%

50%

66.66%

33.33%

在多數(shù)業(yè)務(wù)情況下譬涡，Ant Design需要在設(shè)計區(qū)域內(nèi)解決大量信息收納的問題，因此在 12 柵格系統(tǒng)的基礎(chǔ)上啥辨，我們將整個設(shè)計建議區(qū)域按照 24 等分的原則進(jìn)行劃分昂儒。
劃分之后的信息區(qū)塊我們稱之為『盒子』。建議橫向排列的盒子數(shù)量最多四個委可，最少一個渊跋±拔耍『盒子』在整個屏幕上占比見上圖。設(shè)計部分基于盒子的單位定制盒子內(nèi)部的排版規(guī)則拾酝，以保證視覺層面的舒適感燕少。

概述

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

• 通過row在水平方向建立一組column（簡寫col）

• 你的內(nèi)容應(yīng)當(dāng)放置于col內(nèi)，并且材诽，只有col可以作為row的直接元素

• 柵格系統(tǒng)中的列是指1到24的值來表示其跨越的范圍底挫。例如，三個等寬的列可以使用.col-8來創(chuàng)建

• 如果一個row中的col總和超過 24脸侥，那么多余的col會作為一個整體另起一行排列

  Flex 布局

  我們的柵格化系統(tǒng)支持 Flex 布局建邓，允許子元素在父節(jié)點(diǎn)內(nèi)的水平對齊方式 - 居左、居中睁枕、居右官边、等寬排列、分散排列外遇。子元素與子元素之間注簿，支持頂部對齊、垂直居中對齊跳仿、底部對齊的方式诡渴。同時，支持使用 order 來定義元素的排列順序菲语。
  Flex 布局是基于 24 柵格來定義每一個『盒子』的寬度妄辩，但不拘泥于柵格。

  代碼演示

col-12

col-12

col-8

col-8

col-8

col-6

col-6

col-6

col-6

基礎(chǔ)柵格 #

從堆疊到水平排列谨究。
使用單一的一組 Row 和 Col 柵格組件恩袱，就可以創(chuàng)建一個基本的柵格系統(tǒng)，所有列（Col）必須放在 Row 內(nèi)胶哲。

[圖片上傳失敗...(image-314d9c-1555835941419)]

[圖片上傳失敗...(image-b3be92-1555835941419)]

Align Top

col-4

col-4

col-4

col-4

Align Center

col-4

col-4

col-4

col-4

Align Bottom

col-4

col-4

col-4

col-4

Flex 對齊 #

Flex 子元素垂直對齊畔塔。

[圖片上傳失敗...(image-aa4b9d-1555835941419)]

[圖片上傳失敗...(image-694d29-1555835941419)]

1 col-order-4

2 col-order-3

3 col-order-2

4 col-order-1

Flex 排序 #

從堆疊到水平排列。
通過 Flex 布局的 Order 來改變元素的排序鸯屿。

[圖片上傳失敗...(image-a7be6-1555835941419)]

[圖片上傳失敗...(image-a54ae2-1555835941419)]

sub-element align left

col-4

col-4

col-4

col-4

sub-element align center

col-4

col-4

col-4

col-4

sub-element align right

col-4

col-4

col-4

col-4

sub-element monospaced arrangement

col-4

col-4

col-4

col-4

sub-element align full

col-4

col-4

col-4

col-4

Flex 布局 #

Flex 布局基礎(chǔ)澈吨。
使用 row-flex 定義 flex 布局，其子元素根據(jù)不同的值 start,center,end,space-between,space-around寄摆，分別定義其在父節(jié)點(diǎn)里面的排版方式谅辣。

[圖片上傳失敗...(image-a3393e-1555835941419)]

[圖片上傳失敗...(image-4fa851-1555835941419)]

col-6

col-6

col-6

col-6

區(qū)塊間隔 #

柵格常常需要和間隔進(jìn)行配合，你可以使用 Row 的 gutter 屬性婶恼，我們推薦使用 (16+8n)px 作為柵格間隔桑阶。(n 是自然數(shù))
如果要支持響應(yīng)式柏副，可以寫成 { xs: 8, sm: 16, md: 24, lg: 32 }。

[圖片上傳失敗...(image-8c6000-1555835941418)]

[圖片上傳失敗...(image-6a944c-1555835941418)]

col-8

col-8

col-6 col-offset-6

col-6 col-offset-6

col-12 col-offset-6

左右偏移 #

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

[圖片上傳失敗...(image-bdaec9-1555835941417)]

[圖片上傳失敗...(image-dff64b-1555835941417)]

Col

Col

Col

其他屬性的響應(yīng)式 #

span pull push offset order 屬性可以通過內(nèi)嵌到 xs sm md lg xl xxl 屬性中來使用荔泳。
其中 :xs="6" 相當(dāng)于 :xs="{ span: 6 }"。

[圖片上傳失敗...(image-a7a8a1-1555835941417)]

[圖片上傳失敗...(image-f92d5e-1555835941417)]

Col

Col

Col

響應(yīng)式布局 #

參照 Bootstrap 的 響應(yīng)式設(shè)計虐杯，預(yù)設(shè)六個響應(yīng)尺寸：xs sm md lg xl xxl玛歌。

[圖片上傳失敗...(image-fa7667-1555835941416)]

[圖片上傳失敗...(image-6ca69b-1555835941416)]

col-18 col-push-6

col-6 col-pull-18

柵格排序 #

列排序。
通過使用 push 和 pull 類就可以很容易的改變列（column）的順序擎椰。

[圖片上傳失敗...(image-450b09-1555835941416)]

[圖片上傳失敗...(image-a7629c-1555835941416)]

Gutter (px):

81624324048

Column Count:

2346812

Column

Column

Column

Column

<pre data-v-23510863="" data-v-21b4b419="" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13px; margin: 0px; overflow: auto; padding: 8px 16px; width: auto; background: rgb(249, 249, 249); border-radius: 6px;"><Row :gutter="16">
<Col :span="6"/>
<Col :span="6"/>
<Col :span="6"/>
<Col :span="6"/>
</Row></pre>

柵格配置器 #

可以簡單配置幾種等分柵格和間距支子。

[圖片上傳失敗...(image-fa58e-1555835941416)]

[圖片上傳失敗...(image-f12aef-1555835941416)]

API #

Row #

Col #