ant-design/components/layout/demo/flex.md
afc163 753c01ae18 ES6 syntax for demo code
fix antd.notification
2015-10-28 20:55:49 +08:00

59 lines
1.4 KiB
Markdown

# Flex布局
- order: 4
Flex 布局基础。
使用 `row-flex` 定义 `flex` 布局,其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`,分别定义其在父节点里面的排版方式。
---
````jsx
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')
)
````