在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
概述
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
通过
row
在水平方向建立一组
column
（简写col）
你的内容应当放置于
col
内，并且，只有
col
可以作为
row
的直接元素
栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽d的列可以使用
.col-8
来创建
如果一个
row
中的
col
总和超过24，那么多余的
col
会作为一个整体另起一行排列
Flex 布局
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
<
div
class
=
"col-8"
>
.col-8
</
div
>
<
div
class
=
"col-8"
>
.col-8
</
div
>
<
div
class
=
"col-8"
>
.col-8
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col-12"
>
.col-12
</
div
>
<
div
class
=
"col-12"
>
.col-12
</
div
>
</
div
>
从堆叠到水平排列。
使用单一的一组
.col-*
栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在
.row
内。
<div class="row">
<div class="col-8">.col-8</div>
<div class="col-8 col-offset-8">.col-8 .col-offset-8</div>
</div>
<div class="row">
<div class="col-6 col-offset-6">.col-6 .col-offset-6</div>
<div class="col-6 col-offset-6">.col-6 .col-offset-6</div>
</div>
<div class="row">
<div class="col-12 col-offset-6">.col-12 .col-offset-6</div>
</div>
使用
.col-offset-*
类可以将列向右侧偏。例如，
.col-offset-4
类将
.col-md-4
元素向右侧偏移了4个列（column）的宽度。
.col-6 .col-pull-18
<div class="row">
<div class="col-18 col-push-6">.col-18 .col-push-6</div>
<div class="col-6 col-pull-18">.col-6 .col-pull-18</div>
</div>
通过使用
.col-push-*
和
.col-pull-*
类就可以很容易的改变列（column）的顺序。
<
div
class
=
"row-flex row-flex-start"
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
</
div
>
<
p
>
子元素居中排列
</
p
>
<
div
class
=
"row-flex row-flex-center"
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
</
div
>
<
p
>
子元素居右排列
</
p
>
<
div
class
=
"row-flex row-flex-end"
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
</
div
>
<
p
>
子元素等宽排列
</
p
>
<
div
class
=
"row-flex row-flex-space-between"
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
</
div
>
<
p
>
子元素分散对齐
</
p
>
<
div
class
=
"row-flex row-flex-space-around"
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
<
div
class
=
"col-4"
>
2
</
div
>
</
div
>
Flex布局
Flex 布局基础。
使用
row-flex
定义
flex
布局，其子元素根据不同的值
start
,
center
,
end
,
space-between
,
space-around
，分别定义其在父节点里面的排版方式。
<p>顶部对齐</p>
<div class="row-flex row-flex-center row-flex-top">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
<p>居中对齐</p>
<div class="row-flex row-flex-space-around row-flex-middle">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
<p>底部对齐</p>
<div class="row-flex row-flex-space-between row-flex-bottom">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
Flex对齐
Flex 子元素垂直对齐。
<div class="row-flex">
<div class="col-6 col-order-4">1 col-order-4</div>
<div class="col-6 col-order-3">2 col-order-3</div>
<div class="col-6 col-order-2">3 col-order-2</div>
<div class="col-6 col-order-1">4 col-order-1</div>
</div>
Flex排序
通过 Flex 布局的 Order 来改变元素的排序。
