update: 修改 flex demo

This commit is contained in:
pizn 2015-10-28 17:24:35 +08:00
parent d1e60798af
commit 68a952fb62
2 changed files with 8 additions and 8 deletions

View File

@ -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>

View File

@ -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>