## Contenedor
Componentes contenedores para iniciar una estructura básica de un sitio:
``: Contenedor. Cuando este elemento se anida con un `` o ``, todos los elementos secundarios se organizan verticalmente.
De lo contrario, de forma horizontal.
``: Contenedor para cabeceras.
``: Contenedor para secciones laterales (generalmente, una barra lateral).
``: Contenedor para sección principal.
``: Contenedor para pie de página.
:::tip
Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un ``.
:::
### Diseños comunes
:::demo
```html
Cabecera
Principal
Cabecera
Principal
Pie de página
Barra lateral
Principal
Cabecera
Barra lateral
Principal
Cabecera
Barra lateral
Principal
Pie de página
Barra lateral
Cabecera
Principal
Barra lateral
Cabecera
Principal
Pie de página
```
:::
### Ejemplo
:::demo
```html
Navigator One
Group 1
Option 1
Option 2
Option 3
Option4
Option 4-1
Navigator Two
Group 1
Option 1
Option 2
Option 3
Option 4
Option 4-1
Navigator Three
Group 1
Option 1
Option 2
Option 3
Option 4
Option 4-1
View
Add
Delete
Tom
```
:::
### Atributos de contenedor
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |
| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |
### Atributos de cabecera
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | --------------------- | ------ | ----------------- | ----------- |
| height | altura de la cabecera | string | — | 60px |
### Atributos de barra lateral
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ------------------------- | ------ | ----------------- | ----------- |
| width | ancho de la barra lateral | string | — | 300px |
### Atributos de pie de página
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ------------------------ | ------ | ----------------- | ----------- |
| height | altura del pie de página | string | — | 60px |