elementUI 學習入門之 container 布局容器


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM