Layout 布局

通過(guò)基礎(chǔ)的 24 分欄，迅速簡(jiǎn)便地創(chuàng)建布局。

• 基礎(chǔ)布局
  使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。
  通過(guò) row 和 col 組件，并通過(guò) col 組件的 span 屬性我們就可以自由地組合布局。
  注：row表示行，col表示單元格，通過(guò)span屬性可以進(jìn)行單元格合并。

  
  
  
  

• 分欄間隔
  分欄之間存在間隔。
  Row 組件 提供 gutter 屬性來(lái)指定每一欄之間的間隔，默認(rèn)間隔為 0。
  注：分欄就是單元格合并而成的容器。

  
  
  
  

• 混合布局
  通過(guò)基礎(chǔ)的 1/24 分欄任意擴(kuò)展組合形成較為復(fù)雜的混合布局。

  
  
  
  

• 分欄偏移
  支持偏移指定的欄數(shù)。
  通過(guò)制定 col 組件的 offset 屬性可以指定分欄偏移的欄數(shù)。
  注：相當(dāng)于指定左外邊距。

  
  
  
  

• 對(duì)齊方式
  通過(guò) flex 布局來(lái)對(duì)分欄進(jìn)行靈活的對(duì)齊。
  將 type 屬性賦值為 'flex'，可以啟用 flex 布局，并可通過(guò) justify 屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式。
  注：默認(rèn)是start，相當(dāng)于居左、center是居中、end相當(dāng)于居右、space-between相當(dāng)于欄格之間，不包含左右兩邊的容器之間、space-around相當(dāng)于欄格的前后都有距離。

  
  
  
  

• 響應(yīng)式布局
  參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：xs、sm、md、lg 和 xl。

  
  
  
  
• 基于斷點(diǎn)的隱藏類
  Element 額外提供了一系列類名，用于在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請(qǐng)自行引入以下文件：
  
  
  包含的類名及其含義為：
  <1>hidden-xs-only - 當(dāng)視口在 xs 尺寸時(shí)隱藏
  <2>hidden-sm-only - 當(dāng)視口在 sm 尺寸時(shí)隱藏
  <3>hidden-sm-and-down - 當(dāng)視口在 sm 及以下尺寸時(shí)隱藏
  <4>hidden-sm-and-up - 當(dāng)視口在 sm 及以上尺寸時(shí)隱藏
  <5>hidden-md-only - 當(dāng)視口在 md 尺寸時(shí)隱藏
  <6>hidden-md-and-down - 當(dāng)視口在 md 及以下尺寸時(shí)隱藏
  <7>hidden-md-and-up - 當(dāng)視口在 md 及以上尺寸時(shí)隱藏
  <8>hidden-lg-only - 當(dāng)視口在 lg 尺寸時(shí)隱藏
  <9>hidden-lg-and-down - 當(dāng)視口在 lg 及以下尺寸時(shí)隱藏
  <10>hidden-lg-and-up - 當(dāng)視口在 lg 及以上尺寸時(shí)隱藏
  <11>hidden-xl-only - 當(dāng)視口在 xl 尺寸時(shí)隱藏

• Row Attributes

  
  

• Col Attributes

  
  

Container 布局容器

用于布局的容器組件，方便快速搭建頁(yè)面的基本結(jié)構(gòu)：
<el-container>：外層容器。當(dāng)子元素中包含 <el-header> 或 <el-footer> 時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。
<el-header>：頂欄容器。
<el-aside>：側(cè)邊欄容器。
<el-main>：主要區(qū)域容器。
<el-footer>：底欄容器。
以上組件采用了 flex 布局，使用前請(qǐng)確定目標(biāo)瀏覽器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

• 常見(jiàn)頁(yè)面布局