Space
Keep the same width in the arrangement of elements.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Keep the same width in the arrangement of elements.
When to Use
Useful for multiple elements to maintain the same spacing horizontally or vertically.
Demos
Space
Props
| Name | Description | Type | Default |
|---|---|---|---|
| align | Align the items on the cross axis. | 'start' | 'end' | 'center' | 'baseline' | - |
| block | Should render as block element. | boolean | false |
| direction | The spacing direction. | 'vertical' | 'horizontal' | 'horizontal' |
| justify | Align the items on the main axis. | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | - |
| onClick | The click event of the Space | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
| wrap | Should line break automatically, work only with horizontal. | boolean | false |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --gap | The gap between items. | 8px |
| --gap-horizontal | The horizontal gap between items. | var(--gap) |
| --gap-vertical | The vertical gap between items. | var(--gap) |