Space 间距 ​

虽然我们已经有了 Divider 分割线，但是很多时候我们需要不止一条分割线来分隔组件，因此我们把许多组件都堆叠在分割线上，但是这样做不仅让我们的代码变得丑陋，还使得难以维护。Space 间距正是为此而生，它能帮我们优雅地处理间距。

基础用法 ​

基础的用法，提供统一的间距。​

垂直布局 ​

使用 direction 来控制布局方式，我们底层使用了 flex-direction 来实现该功能。

控制间距的大小 ​

通过 size API 来控制间距的大小。

您可以设置 small、default、large 这三个尺寸，它们分别对应 8px、12px、16px。 默认尺寸是 small，即 8px。

当然你也可以通过自定义尺寸来覆盖它。请参考下一节。

自定义尺寸 ​

有时，预设的尺寸不符合业务需求，我们可以使用自定义尺寸（数字类型）来控制项目之间的间距。

自动换行 ​

当在水平模式下，使用 wrap (布尔类型) 来控制自动换行行为。

分隔符 ​

有时候，我们想要的不只是空白的间距，所以我们有了分隔符 (spacer) 来帮助我们。

字面量类型的分隔符 ​

分隔符也可以是 VNode ​

对齐方式 ​

设置此属性可以调整子节点的对齐方式，可选的值请参照 align-items。

填满容器 ​

通过 fill （布尔类型） 参数，可以控制子节点是否自动填充容器。

下例中，设置为 fill 时，子节点的宽度会自动适应容器的宽度。

你也可以通过 fillRatio 参数，自定义填充比例，默认值为 100，代表以父容器的 100% 宽度为基准进行填充。

需要注意的是，水平布局和垂直布局的表现略有不同，具体效果可以在下例中查看。

API ​

属性 ​

插槽 ​

来源 ​

组件 • 样式 • 文档

贡献者 ​