一、基礎布局（el-row、el-col）

? ? |--布局規則：通過基礎的24分欄，通過el-row、el-col組件，并通過col組件的span就可以自由地組合布局。

? ? |--全局引入element css

? ? ? ? |--可以在官網上在線主體編輯定義自己想要的顏色，然后下載，在main.js中引入。

官網自定義主題樣式

? ?

下載后的style文件

全局引入樣式文件

? ? |--示例1：占據100%（span=24）占據50%（span=12）

組件中代碼

樣式效果

? ? |--示例2：

3.4.6等分布局

布局效果

二、分欄間隔

? ? |--Row組件提供了gutter（排水溝）屬性來指定每一欄之間的間隔（像水溝一樣），默認間隔為0.

? ? |--示例：這里個gutter=20,20是以px計算。

在6等分的el-row添加gutter=20

頁面效果

三、混合布局

? ? |--通過基礎的1/24分欄，任意擴展組合形成較為復雜的混合布局。

el-col中span值相加等24即可

頁面效果（混合布局）

四、分欄偏移

? ? |--通過col組件的offset(位移)屬性可以指定偏移的欄數。

el-col中設置offset屬性

頁面效果

五、對齊方式

? ? |--在row組件中設置type=flex,就可以啟用flex布局，通過設置justify屬性定義子元素的排版方式。

? ? |--justify的值：start、end、center、space-between、space-around

頁面效果

六、響應式布局

|--參照了Bootstrap的響應式設計，預設置了5個響應尺寸：xs、sm、md、lg、xl

窗口最大化的時候占據3/24

逐漸縮小窗口到md尺寸，占據8/24

繼續縮小至sm尺寸，占據6/24

縮小至xs尺寸，占據16/24

七、基于斷點的隱藏

? ? |--element額外提供了一系列類名，用于在某種添加下隱藏元素，這些類名可以添加在任何DOM元素或自定義組件上，如果想要使用，引入下面文件：

直接引入即可

? ? |--包含的類名及其含義：

? ? |--示例：

添加class

默認全尺寸窗口

在xs尺寸下button消失了

簡單的布局涉及到的問題就總結完畢了，沒啥難度，重在總結實踐！