Container 布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

  • el-container:外层容器,指定is-vertical垂直上下排列,否则会水平左右排列。
  • el-header:顶栏容器。
  • el-aside:侧边栏容器。
  • el-main:主要区域容器。
  • el-footer:底栏容器。

提示

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

常见页面布局

布局1

Header
Main

布局2

Header
Main
Footer

布局3

Main

布局4

Header
Main

布局5

Header
Main
Footer

布局6

Header
Main

布局7

Header
Main
Footer
显示代码