mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 06:43:16 +08:00
update: 修改 flex demo
This commit is contained in:
parent
d1e60798af
commit
68a952fb62
@ -24,7 +24,7 @@ var DemoBox = React.createClass({
|
|||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div>
|
<div>
|
||||||
<p>顶部对齐</p>
|
<p>顶部对齐</p>
|
||||||
<Row justify="center" align="top">
|
<Row type="flex" justify="center" align="top">
|
||||||
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
|
<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="50">.col-4</DemoBox></Col>
|
||||||
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
||||||
@ -32,7 +32,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>居中对齐</p>
|
<p>居中对齐</p>
|
||||||
<Row justify="space-around" align="middle">
|
<Row type="flex" justify="space-around" align="middle">
|
||||||
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
|
<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="50">.col-4</DemoBox></Col>
|
||||||
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
||||||
@ -40,7 +40,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>底部对齐</p>
|
<p>底部对齐</p>
|
||||||
<Row justify="space-between" align="bottom">
|
<Row type="flex" justify="space-between" align="bottom">
|
||||||
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
|
<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="50">.col-4</DemoBox></Col>
|
||||||
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
|
||||||
|
@ -15,7 +15,7 @@ var Col = antd.Col;
|
|||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div>
|
<div>
|
||||||
<p>子元素居左排列</p>
|
<p>子元素居左排列</p>
|
||||||
<Row justify="start">
|
<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>
|
||||||
<Col span="4">.col-4</Col>
|
<Col span="4">.col-4</Col>
|
||||||
@ -23,7 +23,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>子元素居中排列</p>
|
<p>子元素居中排列</p>
|
||||||
<Row justify="center">
|
<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>
|
||||||
<Col span="4">.col-4</Col>
|
<Col span="4">.col-4</Col>
|
||||||
@ -31,7 +31,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>子元素居右排列</p>
|
<p>子元素居右排列</p>
|
||||||
<Row justify="end">
|
<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>
|
||||||
<Col span="4">.col-4</Col>
|
<Col span="4">.col-4</Col>
|
||||||
@ -39,7 +39,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>子元素等宽排列</p>
|
<p>子元素等宽排列</p>
|
||||||
<Row justify="space-between">
|
<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>
|
||||||
<Col span="4">.col-4</Col>
|
<Col span="4">.col-4</Col>
|
||||||
@ -47,7 +47,7 @@ ReactDOM.render(
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<p>子元素分散对齐</p>
|
<p>子元素分散对齐</p>
|
||||||
<Row justify="space-around">
|
<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>
|
||||||
<Col span="4">.col-4</Col>
|
<Col span="4">.col-4</Col>
|
||||||
|
Loading…
Reference in New Issue
Block a user