# Layout 布局
---
24 栅格系统。
## 设计理念
在多数业务情况下，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 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
## 组件演示
.col-12
.col-12
.col-8
.col-8
.col-8
.col-6
.col-6
.col-6
.col-6
.col-8
.col-8
.col-6 .col-offset-6
.col-6 .col-offset-6
.col-12 .col-offset-6
.col-18 .col-push-6
.col-6 .col-pull-18
子元素居左排列
.col-4
.col-4
.col-4
.col-4
子元素居中排列
.col-4
.col-4
.col-4
.col-4
子元素居右排列
.col-4
.col-4
.col-4
.col-4
子元素等宽排列
.col-4
.col-4
.col-4
.col-4
子元素分散对齐
.col-4
.col-4
.col-4
.col-4
顶部对齐
.col-4
.col-4
.col-4
.col-4
居中对齐
.col-4
.col-4
.col-4
.col-4
底部对齐
.col-4
.col-4
.col-4
.col-4
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1