Element UI组件el-col、el-row布局学习笔记

一、简介

el-col：列。是Element UI布局中的核心组件，他的作用的将一行分成24个网格，为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。

el-row：行。包裹在el-col外层，其中可以有无数个el-col。

1.  
   <el-row style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="24">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </el-row>

 

在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。

1.  
   <el-row style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </el-row>

  

二、el-row的属性：

:gutter  调整布局之间的宽度---分栏间隔。（也就是两列之间的间隔距离）

原代码：

1.  
   <el-row style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   <el-col :span="12">
6.  
   <div style="background:yellow;height:100px"></div>
7.  
   </el-col>
8.  
   </el-row>

 如果两个div间需要间隔以示区分。就用:gutter属性。

1.  
   <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   <el-col :span="12">
6.  
   <div style="background:yellow;height:100px"></div>
7.  
   </el-col>
8.  
   </el-row>

 然而在网页页面代码中，其代码显示为：

 也就是说，:gutter属性其实是设置了div的padding属性。

三、el-col属性

（1）:offset  调整方块的位置（每次1格/24格）

1.  
   <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :offset="6" :span="12">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </el-row>

（2） :push 向右移动格数，值为1-24之间整数

1.  
   <el-row style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12" :push="2">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </el-row>

 

（3）:pull 向左移动格数，值为1-24之间整数

1.  
   <el-row style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12" :pull="2">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </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 左右各占半格空格对齐

1.  
   <el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
2.  
   <el-col :span="12">
3.  
   <div style="background:red;height:100px"></div>
4.  
   </el-col>
5.  
   </el-row>

这篇好文章是转载于：学新通技术网