ant-design/components/space/demo/align.md
二货机器人 7e9fe271ed
feat: Space support align ()
* support align

* update demo & snapshot

* update comment

* update docs

* Update components/space/index.en-US.md

Co-Authored-By: 骗你是小猫咪 <darryshaw@gmail.com>

* update doc

Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
2020-04-16 12:28:04 +08:00

1.4 KiB

order title
3
zh-CN en-US
对齐 Align

zh-CN

设置对齐模式。

en-US

Config item align.

import { Space, Button } from 'antd';

ReactDOM.render(
  <div className="space-align-container">
    <div className="space-align-block">
      <Space align="center">
        center
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="start">
        start
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="end">
        end
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="baseline">
        baseline
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
  </div>,
  mountNode,
);
.space-align-container {
  display: flex;
  align-item: flex-start;
  flex-wrap: wrap;
}
.space-align-block {
  margin: 8px 4px;
  border: 1px solid #40a9ff;
  padding: 4px;
  flex: none;
}
.space-align-block .mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}