04.Element UI布局

一、基础布局（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消失了

简单的布局涉及到的问题就总结完毕了，没啥难度，重在总结实践！