## Container 布局容器 用于布局的容器组件，方便快速搭建页面的基本结构： ``：外层容器。当子元素中包含 `` 或 `` 时，全部子元素会垂直上下排列，否则会水平左右排列。 ``：顶栏容器。 ``：侧边栏容器。 ``：主要区域容器。 ``：底栏容器。 :::tip 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`` 的子元素只能是后四者，后四者的父元素也只能是 ``。 ::: ### 常见页面布局 ::: demo ```html Header Main Header Main Footer Aside Main Header Aside Main Header Aside Main Footer Aside Header Main Aside Header Main Footer ``` ::: ### 实例 ::: demo ```html 选项1 选项2 选项3 选项4-1 选项1 选项2 选项3 选项4-1 选项1 选项2 选项3 选项4-1 查看 新增 删除 王小虎 ``` ::: ### Container Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------|----------|---------|-------------|--------| | direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal | ### Header Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------|----------|---------|-------------|--------| | height | 顶栏高度 | string | — | 60px | ### Aside Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------|----------|---------|-------------|--------| | width | 侧边栏宽度 | string | — | 300px | ### Footer Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------|----------|---------|-------------|--------| | height | 底栏高度 | string | — | 60px |