Even though we have [Divider](#/en-US/component/divider), but sometimes we need more than one [Divider](#/en-US/component/divider) to split the elements apart, so we stack each elements upon [Divider](#/en-US/component/divider), but doing so not only makes our code ugly but also makes it difficult to maintain. **Space** is this kind of component provides us both productivity and elegance.
### Basic usage
The basic use case is using this component to provide unified space between each components
:::demo Using Space to provide space
```html
<template>
<el-spacewrap>
<el-cardclass="box-card"style="width: 250px"v-for="i in 3":key="i">
You can set the size with built-in sizes `mini`, `small`, `medium`, `large`, these size coresponds to `4px`, `8px`, `12px`, `16px`. The default size is `small`, A.K.A. `8px`
Do not use `ElSpace` with components that depend on ancestor width (height), e.g. `ElSlider`, in this case when you drag the trigger button the bar will grow which causes misplacement between cursor and trigger button.
:::
### Auto wrapping
When in **horizontal** mode, using `wrap` (**bool type**) to control auto wrapping behavior.
:::demo Using `wrap` to control line wrap
```html
<el-spacewrap>
<divv-for="i in 20":key="i">
<el-buttontype="text">
Text button
</el-button>
</div>
</el-space>
```
:::
### Spacer
Sometimes we want something more than blank space, so we have (spacer) to help us.
#### Literal type spacer
:::demo
```html
<template>
<el-space:size="size"spacer="|">
<divv-for="i in 2":key="i">
<el-button>
button {{ i }}
</el-button>
</div>
</el-space>
</template>
<script>
export default {
data() {
return {
size: 10,
}
},
}
</script>
```
:::
#### Spacer can also be VNode
:::demo
```html
<template>
<el-space:size="size":spacer="spacer">
<divv-for="i in 2":key="i">
<el-button>
button {{ i }}
</el-button>
</div>
</el-space>
</template>
<script>
import { h, resolveComponent } from 'vue'
import { ElDivider } from 'element-plus'
export default {
data() {
return {
size: 10,
spacer: h(ElDivider, { direction: 'vertical' }),
}
},
}
</script>
```
:::
### Alignment
Setting this attribute can adjust the alignment of child nodes, the desirable value can be found at [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`.
It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example.
