mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-29 20:08:37 +08:00
42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
---
|
|
order: 5
|
|
title: Flex 对齐
|
|
---
|
|
|
|
Flex 子元素垂直对齐。
|
|
|
|
````jsx
|
|
import { Row, Col } from 'antd';
|
|
|
|
const DemoBox = props => <p className={`height-${props.value}`}>{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>,
|
|
mountNode
|
|
);
|
|
````
|