cjd-parkball
Version:
> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用
49 lines (39 loc) • 1.37 kB
Markdown
---
category: 2
title: Flex 对齐
title_en: Flex Alignment
---
zh-CN
Flex 子元素垂直对齐。
en-US
Flex child elements vertically aligned.
````jsx
import { Row, Col } from 'parkball';
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
ReactDOM.render(
<div>
<p>Align Top</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>Align Center</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>Align Bottom</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
);
````