Space - Semi Design

Basic · Space

Space

Set the spacing between components.

Demos

How to import

Basic Usage

Alignment

You can use align to set the alignment, optional: start, center（default）, end, baseline.

Spacing

You can use spacing to set the spacing size, optional: tight (8px, default), medium (16px), loose (24px), and allow to pass in number to customize the spacing size, and also support to pass in array to set the horizontal and vertical spacing at the same time.

Direction

You can use vertical to set whether the spacing is vertical, the default is false.

Wrap

When the spacing is horizontal，you can use wrap to set whether to wrap automatically, the default is false.

API Reference

Properties	Instructions	Type	Default	Version
align	Alignment, optional: `start`、`end`、`center`、`baseline`	string	`center`	>=1.17.0
className	Class name	string	-	>=1.17.0
spacing	The space size, optional: `loose`、`medium`、`tight` 、number and array	string\|number\|array	`medium`	>=1.17.0
style	Inline style	CSSProperties	-	>=1.17.0
vertical	Set to vertical spacing	boolean	false	>=1.17.0
wrap	Whether to wrap	boolean	false	>=1.17.0