间距 Space
元素排列中保持相同的宽度。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
元素排列中保持相同的宽度。
何时使用
适用于多个元素按照水平或垂直方向保持相同的间距。
示例
Space
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | 交叉轴对齐方式 | 'start' | 'end' | 'center' | 'baseline' | - |
| block | 是否渲染为块级元素 | boolean | false |
| direction | 间距方向 | 'vertical' | 'horizontal' | 'horizontal' |
| justify | 主轴对齐方式 | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | - |
| onClick | 点击事件 | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
| wrap | 是否自动换行，仅在 horizontal 时有效 | boolean | false |
CSS 变量
| 属性 | 说明 | 默认值 |
|---|---|---|
| --gap | 间距大小 | 8px |
| --gap-horizontal | 水平方向的间距大小 | var(--gap) |
| --gap-vertical | 垂直方向的间距大小 | var(--gap) |