antd flex布局

1. 两端对齐 justify="space-between"

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

两端对齐.png

2. 两端对齐，中间各项间隔： 设置gutter

<Row gutter={40} type="flex" justify="space-between" align="bottom">