FlexAlignment.js
1.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
class FlexAlignment extends Component {
render() {
return (
<Fragment>
<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>
</Fragment>
)
}
}
export default FlexAlignment