layui/package/document-component/src/document/zh-CN/components/space.md

::: anchor :::

::: title 基本介绍 :::

::: describe 控制组件之间的间距。 :::

::: title 基础使用 :::

::: demo 默认横向排列，控制相邻组件的水平间距

按钮 {{idx}}

:::

::: title 垂直方向 :::

::: demo 通过 direction="vertical" 设置垂直方向

按钮 {{idx}}

:::

::: title 间距大小 :::

::: demo 通过 size 控制组件大小 xs, sm, md , lg, 分别对应 4px, 8px, 16px, 24px 的间距,默认md。size 也支持通过数组设置间距 [row-gap, column-gap]

{{sizeKey}}

按钮 {{idx}}

:::

::: title 自定义间距大小 :::

::: demo

按钮 {{idx}}

:::

::: title 对齐方式 :::

::: demo

{{alignKey}}

Space: 默认按钮 内容

:::

::: title 自动换行 :::

::: demo

默认按钮{{_}}

:::

::: title Space 属性 :::

::: table

属性	描述	类型	默认值	可选值
align	对齐方式	string	center	start end center baseline
direction	间距方向	string	horizontal	horizontal vertical
fill	子元素是否填充父容器	boolean	false	-
size	间距大小	string	md	lg md sm xs number string [spaceSize,spaceSize]
wrap	是否自动折行	boolean	false	-

:::

type spaceSize = "lg" | "md" | "sm" | "xs" | number | string

[row-gap, column-gap], eg: ['xs','md'] ['10px', '15px'] [10, 15]

:::title Space 插槽 :::

:::table

插槽	描述	参数
default	默认插槽	-
:::

::: contributor space :::

::: previousNext space :::