Element佈局

參考

Layout 佈局
Container 佈局容器
html佈局
CSS3 :nth-child() 選擇器

Layout

通過 row 和 col 組件，

1. 通過 col 組件的 span 屬性可以自由地組合佈局。
2. 通過 row 組件的 gutter 屬性來指定每一欄之間的間隔，默認間隔爲 0。
3. 通過 col 組件的 offset 屬性可以指定分欄偏移的欄數。
4. 通過 row 組件的 type 屬性賦值爲flex，可以啓用 flex 佈局，並可通過 justify 屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的排版方式。
5. 參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs, sm, md, lg, xl。

比如，

<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

這裏通過div的class來定義css。

Container

用於佈局的容器組件，方便快速搭建頁面的基本結構，採用了 flex 佈局，使用前請確定目標瀏覽器是否兼容：

• <el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。
• <el-header>：頂欄容器。
• <el-aside>：側邊欄容器。
• <el-main>：主要區域容器。
• <el-footer>：底欄容器。

此外，<el-container> 的子元素只能是後四者，後四者的父元素也只能是 <el-container>。比如：

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

<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>

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

:nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的類型。n 可以是數字、關鍵詞或公式，第一個子元素的下標是 1。line-height 屬性設置行間的距離（行高），不允許使用負值。a b 選擇 a 元素內部的所有 b 元素。a > b 選擇父元素爲 a 元素的所有 b 元素。