一、简介
el-col：列。是Element UI布局中的核心组件，他的作用的将一行分成24个网格，为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。
el-row：行。包裹在el-col外层，其中可以有无数个el-col。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="24">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
二、el-row的属性：
:gutter 调整布局之间的宽度---分栏间隔。（也就是两列之间的间隔距离）
原代码：
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
<el-col :span="12">
<div style="background:yellow;height:100px"></div>
</el-col>
</el-row>
如果两个div间需要间隔以示区分。就用:gutter属性。
<el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
<el-col :span="12">
<div style="background:yellow;height:100px"></div>
</el-col>
</el-row>
然而在网页页面代码中，其代码显示为：
也就是说，:gutter属性其实是设置了div的padding属性。
三、el-col属性
（1）:offset 调整方块的位置（每次1格/24格）
<el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
<el-col :offset="6" :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
（2） :push 向右移动格数，值为1-24之间整数
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12" :push="2">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
文章来源地址https://www.toymoban.com/news/detail-558245.html
（3）:pull 向左移动格数，值为1-24之间整数
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12" :pull="2">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
（4）Element UI响应式布局
xs：<768px 响应式栅格数或者属性对象，超小屏，比如手机。例如：{ span: 4, offset: 8 }
sm：≥768px 响应式栅格数或者属性对象，小屏幕，比如平板。例如：{ span: 4, offset: 8 }
md：≥992px 响应式栅格数或者属性对象，中等屏幕，比如桌面显示器。例如：{ span: 4, offset: 8 }
lg：≥1200px 响应式栅格数或者属性对象，大屏幕，比如大桌面显示器。例如：{ span: 4, offset: 8 }
xl：≥1920px 响应式栅格数或者属性对象，超大屏幕显示器，比如2k屏等。例如：{ span: 4, offset: 8 }
<el-col :span="20" :xl="{span:16}"></el-col>三、对齐方式
通过设置type="flex"，启动flex布局，通过justify的属性调整排版方式。
justify都属性值：center 居中对齐 start 左对齐 end 右对齐 space-between 空格间距在中间对齐 space-around 左右各占半格空格对齐
<el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
文章来源：https://www.toymoban.com/news/detail-558245.html
到了这里，关于Element UI组件中el-col、el-row布局学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
