一亚情、Container布局容器
? ? |--作用:用于頁(yè)面布局的組件汹粤,方便快速搭建頁(yè)面的基礎(chǔ)結(jié)構(gòu)辨萍。
? ? |--涉及到的組件:
? ? ? ? |--el-container:外層容器,當(dāng)子元素包含header和footer時(shí)萎坷,全部子元素會(huì)垂直上下排列,否則會(huì)水平左右排列沐兰。
? ? ? ? |--el-header:頂欄容器
? ? ? ? |--el-aside:側(cè)邊欄容器
? ? ? ? |--el-main:主要區(qū)域容器
? ? ? ? |--el-footer:底欄容器
? ? |--需要注意:以上組件采用了 flex 布局哆档,使用前請(qǐng)確定目標(biāo)瀏覽器是否兼容。此外住闯,<el-container>?的子元素只能是后四者瓜浸,后四者的父元素也只能是?<el-container>。
? ? |--示例:
基礎(chǔ)頁(yè)面布局
對(duì)應(yīng)上面代碼中三個(gè)布局
帶有側(cè)邊欄布局
頁(yè)面效果
header100%帶側(cè)邊欄
布局效果
布局效果
布局效果