Container 布局容器
用於布局的容器組件,方便快速搭建頁面基本結構
<el-container> : 外層容器。當子元素包含 <el-header> 或 <el-footer> 時,全部子元素會垂直上下排列,否則水平左右排列
<el-header> : 頂欄容器
<el-aside> : 側邊欄容器
<el-main> : 主要區域容器
<el-footer> : 底邊欄容器
這些組件均采用 flex 布局。<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>
上中下排列:
1 <el-container> 2 <el-header>Header</el-header> 3 <el-main>Main</el-main> 4 <el-footer>Footer</el-footer> 5 </el-container>
上下后下面分為左右:
(tips : 開頭紅字:<el-container> 包含<el-header> 或 <el-footer> 時,子元素會垂直排列。故此,設置包含再包含的寫法)
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>