Elementel-rowel-col布局组件详解
本⽂⽬录
1. 背景
2. 分栏布局
3. 分栏间隔
4. 分栏偏移
5. 对齐⽅式
6. 响应式布局
7. ⼩结
1. 背景
element的布局⽅式与bootstrap原理是⼀样的，将⽹页划分成若⼲⾏，然后每⾏等分为若⼲列，基于这样的⽅式进⾏布局，形象的成为栅栏布局。
区别是element可将每⾏划分为24个分栏，⽽bootstrap是划分为12个分栏，从使⽤⾓度，还是24个分栏更加精细。
2. 分栏布局
⾸先每⾏使⽤标签标识，然后每⾏内的列使⽤标识，⾄于每列整⾏的宽度⽐例，则使⽤:span属性进⾏设置。
如下代码，即为将1⾏等分为2列，为了便于区分列，我们为列添加了不同的样式，另外注意是分割线，此处⽤于区分不同的⽰例。
<template>
<div>
flex布局详细讲解<span>每⾏24分栏布局</span>
<el-row>
<el-col :span="12"class="lightgreen-box">⽰例1</el-col>
<el-col :span="12"class="orange-box">⽰例1</el-col>
</el-row>
<el-divider></el-divider>
</div>
</template>
<style scoped>
.lightgreen-box{
background-color: lightgreen;
height: 24px;
}
.orange-box{
background-color: orange;
height: 24px;
}
</style>
效果如下：
3. 分栏间隔
有时候想为不同分栏之间设定⼀定的间隔，可以使⽤标签的:gutter属性，注意默认间隔为0。
此时需要注意的是，下⾯的写法，间隔是不⽣效的。
<span>分栏间隔⽆效</span>
<el-row :gutter="50">
<el-col :span="8"class="lightgreen-box">⽰例2</el-col>
<el-col :span="8"class="orange-box">⽰例2</el-col>
<el-col :span="8"class="lightgreen-box">⽰例2</el-col>
</el-row>
<el-divider></el-divider>
需要在分栏⾥⾯新增元素，才能实现分栏间隔，代码修改如下则间隔⽣效。
<span>分栏间隔有效</span>
<el-row :gutter="24">
<el-col :span="8">
<div class="lightgreen-box">⽰例3</div>
</el-col>
<el-col :span="8">
<div class="orange-box">⽰例3</div>
</el-col>
<el-col :span="8">
<div class="lightgreen-box">⽰例3</div>
</el-col>
</el-row>
<el-divider></el-divider>
上⾯两个⽰例效果如下：
4. 分栏偏移
有时候想让某个分栏不从左边显⽰，⽽是直接显⽰到中间或者右侧，例如右侧导航栏，我们希望它处于右侧且占据页⾯1/3的宽度。此时可以借助offset属性来实现，表⽰偏移量。
此时，想占据1/3宽度，则:span应为8，偏移量应为24-8=16，所以代码如下：
<span>分栏偏移</span>
<el-row>
<el-col :span="8":offset="16">
<div class="lightgreen-box">⽰例4</div>
</el-col>
</el-row>
<el-divider></el-divider>
效果如下：
5. 对齐⽅式
如果想让整个⾏居左、居中、居右对齐，则可以直接设置的对齐⽅式。
此时需要先设置type="flex"来启⽤对齐⽅式，然后通过justify属性来设置具体的对齐⽅式，例如下⾯的例⼦实现了居中对齐。
<span>对齐⽅式</span>
<el-row type="flex"justify="center">
<el-col :span="12">
<div class="lightgreen-box">⽰例5</div>
</el-col>
</el-row>
<el-divider></el-divider>
6. 响应式布局
element和bootstrap的响应式布局原理相同，都是通过为列设置不同分辨率下的占⽤宽度⽐例来实现的。
例如我们想实现在⽐较⼤的分辨率（电脑），每分栏占据屏幕宽度的1/4，⽽在⽐较⼩宽度（⼿机），每分栏占据屏幕全部宽度。这样就能保证在⼿机上也能完整显⽰内容，则可以使⽤如下代码：
<span>响应式布局</span>
<el-row>
<el-col :lg="6":xs="24"class="lightgreen-box">⽰例6</el-col>
<el-col :lg="6":xs="24"class="orange-box">⽰例6</el-col>
<el-col :lg="6":xs="24"class="lightgreen-box">⽰例6</el-col>
<el-col :lg="6":xs="24"class="orange-box">⽰例6</el-col>
</el-row>
在电脑上效果如下：
在⼿机上效果如下：
注意具体的尺⼨属性为：
属性使⽤说明
xs宽度<768px
sm>=768px
md>=992px
lg>=1200px
xl>=1920px
7. ⼩结
element的布局跟bootstrap原理是⼀样的，使⽤起来也⽐较⽅便，具体的参数其实不需要都记住，只要知道⽤法，使⽤时去官⽹查询即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。