ant-design/components/layout/demo/flex.md

66 lines
1.6 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 4
title:
zh-CN: Flex 布局
en-US: Flex Layout
2016-03-31 09:40:55 +08:00
---
2015-06-09 22:19:35 +08:00
## zh-CN
2015-06-15 17:46:42 +08:00
Flex 布局基础。
2015-06-09 22:19:35 +08:00
使用 `row-flex` 定义 `flex` 布局,其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`,分别定义其在父节点里面的排版方式。
## en-US
Use `row-flex` define` flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
2015-10-27 23:52:17 +08:00
````jsx
import { Row, Col } from 'antd';
2015-10-27 23:52:17 +08:00
ReactDOM.render(
<div>
<p>sub-element align left</p>
2015-10-28 17:24:35 +08:00
<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>
2015-10-27 23:52:17 +08:00
</Row>
<p>sub-element align center</p>
2015-10-28 17:24:35 +08:00
<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>
2015-10-27 23:52:17 +08:00
</Row>
<p>sub-element align right</p>
2015-10-28 17:24:35 +08:00
<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>
2015-10-27 23:52:17 +08:00
</Row>
<p>sub-element monospaced arrangement</p>
2015-10-28 17:24:35 +08:00
<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>
2015-10-27 23:52:17 +08:00
</Row>
<p>sub-element align full</p>
2015-10-28 17:24:35 +08:00
<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>
2015-10-27 23:52:17 +08:00
</Row>
</div>,
mountNode
);
2015-06-09 22:19:35 +08:00
````