Container 布局容器

优质
小牛编辑
128浏览
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子元素的排列方向stringhorizontal / verticalhorizontal