## Container
Container components for scaffolding basic structure of the page:
``: wrapper container. When nested with a `` or ``, all its child elements will be vertically arranged. Otherwise horizontally.
``: container for headers.
``: container for side sections (usually a side nav).
``: container for main sections.
``: container for footers.
:::tip
These components use flex for layout, so please make sure your browser supports it. Besides, ``'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a ``.
:::
### Common layouts
::: demo
```html
Header
Main
Header
Main
Footer
Aside
Main
Header
Aside
Main
Header
Aside
Main
Footer
Aside
Header
Main
Aside
Header
Main
Footer
```
:::
### Example
::: 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
```
:::
### Container Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
### Header Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the header | string | — | 60px |
### Aside Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | width of the side section | string | — | 300px |
### Footer Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the footer | string | — | 60px |