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 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
代码演示
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="12">.col-12</Col>
<Col span="12">.col-12</Col>
</Row>
<Row className="testRowClassName">
<Col span="8">.col-8</Col>
<Col span="8">.col-8</Col>
<Col span="8" className="testColClassName">.col-8</Col>
</Row>
<Row>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
</Row>
</div>,
document.getElementById('components-layout-demo-basic')
);
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="8">.col-8</Col>
<Col span="8" offset="8">.col-8</Col>
</Row>
<Row>
<Col span="6" offset="6">.col-6 .col-offset-6</Col>
<Col span="6" offset="6">.col-6 .col-offset-6</Col>
</Row>
<Row>
<Col span="12" offset="6">.col-12 .col-offset-6</Col>
</Row>
</div>,
document.getElementById('components-layout-demo-offset')
);
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="18" push="6">.col-18 .col-push-6</Col>
<Col span="6" pull="18">.col-6 .col-pull-18</Col>
</Row>
</div>,
document.getElementById('components-layout-demo-sort')
);
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<p>子元素居左排列</p>
<Row type="flex" justify="start">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
</Row>
<p>子元素居中排列</p>
<Row type="flex" justify="center">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
</Row>
<p>子元素居右排列</p>
<Row type="flex" justify="end">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
</Row>
<p>子元素等宽排列</p>
<Row type="flex" justify="space-between">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
</Row>
<p>子元素分散对齐</p>
<Row type="flex" justify="space-around">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
</Row>
</div>,
document.getElementById('components-layout-demo-flex')
);
import { Row, Col } from 'antd';
const DemoBox = React.createClass({
render() {
const { value } = this.props;
const className = `hight-${value}`;
return (
<p className={className}>{this.props.children}</p>
);
}
});
ReactDOM.render(
<div>
<p>顶部对齐</p>
<Row type="flex" justify="center" align="top">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
</Row>
<p>居中对齐</p>
<Row type="flex" justify="space-around" align="middle">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
</Row>
<p>底部对齐</p>
<Row type="flex" justify="space-between" align="bottom">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
</Row>
</div>,
document.getElementById('components-layout-demo-flex-align')
);
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row type="flex">
<Col span="6" order="4">1 col-order-4</Col>
<Col span="6" order="3">2 col-order-3</Col>
<Col span="6" order="2">3 col-order-2</Col>
<Col span="6" order="1">4 col-order-1</Col>
</Row>
</div>,
document.getElementById('components-layout-demo-flex-order')
);
Ant Design