## 间隔组件 (`wc-space`)
> 一个简单的flex容器, 会自动把它的子元素之间加一个间距。


### 使用

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
  </wc-lang>
</wc-sandbox>


### 纵向排列 & 分散对齐

只需要简单设置一个属性`vertical`和`justify`即可实现。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/index.js'
  </wc-lang>
  <wc-lang slot="html">
纵向排列: vertical
<wc-space vertical style="width:200px">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>

分散对齐: justify
<wc-space justify>
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
  </wc-lang>
</wc-sandbox>

### 间隔大小

通过设置`gap={size}`来调整间距。`size`可选值有`xxxl、xxl、xl、l(默认)、m、s`,对应的间距分别是`24,20,16,12,8,4`


<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space gap="s">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
<wc-space gap="m">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
<wc-space gap="l">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
<wc-space gap="xl">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
<wc-space gap="xxl">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
<wc-space gap="xxxl">
  <wc-button>按钮</wc-button>
  <wc-input></wc-input>
  <wc-button icon="home"></wc-button>
  <wc-icon name="info"></wc-icon>
  <span>普通节点</span>
</wc-space>
  </wc-lang>
</wc-sandbox>