# El Space

> Space component for consistent spacing between elements.

Space component for consistent spacing between elements. Invoke when user needs to create consistent gaps between components, layout spacing, or element arrangement.

- Page: https://ss33.ai/skills/jiaiyan/el-space-57454038331
- Publisher: jiaiyan
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: MIT
- Source: https://github.com/jiaiyan/element-plus-skills/blob/1d126b39a80523665cc6290f70ce25aa89d708ae/components/el-space/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/jiaiyan/el-space-57454038331

# Space Component

Space component provides consistent spacing between elements for better layout control.

## When to Use

- Consistent component spacing
- Button groups
- Form layouts
- Navigation items

## Basic Usage

```vue
<template>
  <el-space>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
    <el-button>Button 3</el-button>
  </el-space>
</template>
```

## Vertical Layout

```vue
<template>
  <el-space direction="vertical">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>
```

## Control Size

```vue
<template>
  <el-space size="small">
    <el-button>Small</el-button>
  </el-space>
  <el-space size="default">
    <el-button>Default</el-button>
  </el-space>
  <el-space size="large">
    <el-button>Large</el-button>
  </el-space>
</template>
```

## Custom Size

```vue
<template>
  <el-space :size="20">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>
```

## Auto Wrapping

```vue
<template>
  <el-space wrap>
    <el-button v-for="i in 20" :key="i">Button {{ i }}</el-button>
  </el-space>
</template>
```

## Spacer

```vue
<template>
  <el-space spacer="|">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>
```

## Fill Container

```vue
<template>
  <el-space fill>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>
```

## API Reference

### Attributes

| Name | Description | Type | Default |
|------|-------------|------|---------|
| alignment | Alignment of items | CSS align-items | `'center'` |
| direction | Placement direction | `'vertical' \| 'horizontal'` | `'horizontal'` |
| spacer | Spacer element | `string \| number \| VNode` | — |
| size | Spacing size | `'default' \| 'small' \| 'large' \| number \| [number, number]` | `'small'` |
| wrap | Auto wrapping | `boolean` | `false` |
| fill | Fill container | `boolean` | `false` |
| fill-ratio | Fill ratio | `number` | `100` |

### Slots

| Name | Description |
|------|-------------|
| default | Items to be spaced |

## Best Practices

1. Use `wrap` for responsive layouts
2. Use `spacer` for custom separators
3. Use `fill` for equal-width items