Element之layout布局

layout布局(24分栏布局）用到的标签为：<el-row><el-col>

一：基础布局(通过 row 和 col 组件，并通过 col 组件的 span 属性自由的组合布局。)

样式自定义即可

二：分栏间隔

 分栏布局 只需要在<el-row>标签上定义gutter(中文沟的意思)属性

如：<el-row :gutter='20'>

这里的20什么意思呢？首先是以px为单位，就是说间距为20px

实际情况如何呢？

首先间距20px是拆分为做左右个10px,在<el-row>标签中为margin-left:-10px和margin-right:-10px;在<el-col>标签中为 padding-left:10px和padding-right:10px

 三：混合布局

其实根据实际情况的需求设置每个el-row中的el-col的span数量

四：分栏偏移

 主要就是通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

<el-col :span="6" :offset="6">

其次还可以通过push和pull实现右移和左移格数   <el-col :span="6" :pull="6">

 

 五:响应式布局

分为5个尺寸:xs(最小屏)    sm(小屏）  md(中屏）    lg(大屏） xl(最大屏)

这样的话我们就可以根据实际情况来实现不同屏幕下的布局

当然我们也可以 根据需求来设定每个col在不同屏幕中是否需要展示，具体操作为：

在main.js中导入对应的类库

 然后只需要在对应的col中设置对应的class类名即可

 以上就是element中layout布局全部内容(加了一部分自己的理解和自己实践操作后的东西，方便大家理解)