# Space

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/space
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Keep the same width in the arrangement of elements.

## Install

```bash
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)` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt