Container 布局容器

优质

小牛编辑

115浏览

2023-12-01

用于布局的指令，方便快速搭建页面的基本结构：

el-container：外层容器。

el-header 顶栏容器。

el-aside 侧边栏容器。

el-main 主要区域容器。

el-footer 底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，子元素只能是后四者，后四者的父元素也只能是 el-container。

常见页面布局

<div el-container direction="vertical" class="demo-box">
  <div el-header>Header</div>
  <div el-main>Main</div>
</div>
<div el-container direction="vertical" class="demo-box">
  <div el-header>Header</div>
  <div el-main>Main</div>
  <div el-footer>Footer</div>
</div>
<div el-container direction="vertical" class="demo-box">
  <div el-header>Header</div>
  <div el-container>
    <div el-aside width="200px">Aside</div>
    <div el-main>Main</div>
  </div>
</div>
<div el-container direction="vertical" class="demo-box">
  <div el-header>Header</div>
  <div el-container>
    <div el-aside width="200px">Aside</div>
    <div el-container direction="vertical">
      <div el-main>Main</div>
      <div el-footer>Footer</div>
    </div>
  </div>
</div>
<div el-container class="demo-box">
  <div el-aside width="200px">Aside</div>
  <div el-container direction="vertical">
    <div el-header>Header</div>
    <div el-main>Main</div>
  </div>
</div>
<div el-container class="demo-box">
  <div el-aside width="200px">Aside</div>
  <div el-container direction="vertical">
    <div el-header>Header</div>
    <div el-main>Main</div>
    <div el-footer>Footer</div>
  </div>
</div>

Container Attributes

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	horizontal