一、基础布局（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消失了
简单的布局涉及到的问题就总结完毕了，没啥难度，重在总结实践！
