mirror of https://github.com/ant-design/ant-design.git synced 2024-12-29 03:48:26 +08:00

afc163 753c01ae18 ES6 syntax for demo code

fix antd.notification

2015-10-28 20:55:49 +08:00

1.4 KiB

Raw Blame History

Flex布局

order: 4

Flex 布局基础。

使用 row-flex 定义 flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <p>子元素居左排列</p>
    <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>
    </Row>

    <p>子元素居中排列</p>
    <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>
    </Row>

    <p>子元素居右排列</p>
    <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>
    </Row>

    <p>子元素等宽排列</p>
    <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>
    </Row>

    <p>子元素分散对齐</p>
    <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>
    </Row>
  </div>,
  document.getElementById('components-layout-demo-flex')
)

1.4 KiB Raw Blame History

Flex布局

1.4 KiB

Raw Blame History