vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]-腾讯云开发者社区-腾讯云
css 栅格布局el-row（xs，sm，md，lg，xl）_el-row布局-CSDN博客
layout布局系列学习
row 行概念
<el-row></el-row>复制
col 列概念
<el-col></el-col>复制
col组件的:span属性的布局调整,一共分为24栏:
代码示例:
<el-row>
<el-col :span="24"><div class="grid-content"></div></el-col>
</el-row> 复制
效果展示:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/6df4517ec6b8c332cb11686c9db47165.png)
vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
代码示例：
<el-row>
<el-col :span="12"><div class="grid-content"></div></el-col>
</el-row>复制
效果展示:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/461df19fbd683caf902ccdc3598269bd.png)
vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
row组件的:gutter属性来调整布局之间的宽度—分栏间隔
代码示例:
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>复制
效果:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/3a405ab102fdda3fd1a8875f8058bdac.png)
vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
Col组件的:offset属性调整方块的偏移位置（每次1格/24格）
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
</el-row>复制
效果:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/176852da31b0401b7a80054b9e2ffa15.png)
vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
对齐方式:
row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:
- justify=center 居中对齐
- justify=start 左对齐
- justify=end 右对齐
- justify=space-between 空格间距在中间对齐
- justify=space-around 左右各占半格空格对齐
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content"></div></el-col>
</el-row>复制
效果:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/f0f60805328f3f8d396b921af037a93c.png)
vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
响应式布局:
参考bootstrap的响应式，预设四个尺寸
- xs <768px
- sm ≥768px
- md ≥992
- lg ≥120
使用方式:复制
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>复制
练习示例:
<span class="field-label">方块选择:</span>
<!-- 选择屏幕框 -->
<select v-model="selected" @change="selectbj(selected)">
<option v-for="option in layouts" :value="option.value">
{
{ option.name }}
</option>
</select>复制
data默认初始化数据:
selected: 0,
layouts: [
{ 'name': '1x1模式', 'value': '0' },
{ 'name': '2x1模式', 'value': '1' },
{ 'name': '2x2模式', 'value': '2' },
{ 'name': '3x2模式', 'value': '3' },
{ 'name': '3x3模式', 'value': '4' },
{ 'name': '1+5模式', 'value': '5' }
],复制
布局代码:
<el-main v-model="selected" >
<div class="block" style="height:400px">
<!-- {
{selected}} -->
<div style="height:100%;width:100%" v-if="selected==0">
<!-- 1*1布局 -->
<el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
<el-col :span="24"></el-col>
</el-row>
</div>
<!-- 2*1布局 -->
<div style="height:100%;width:100%" v-else-if="selected==1">
<el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 2*2 -->
<div style="height:100%;width:100%" v-else-if="selected==2">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 3*2布局 -->
<div style="height:100%;width:100%" v-else-if="selected==3">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 3*3模式 -->
<div style="height:100%;width:100%" v-else-if="selected==4">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
</div>
<!-- 模式 -->
<div style="height:100%;width:100%" v-else>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8">
<div class="grid-a-contentWidth"></div>
<br>
<div class="grid-a-contentWidth"></div>
</el-col>
<el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
</el-row>
</div>
</div>
</el-main>复制
样式(从里面对应取一下):
<style scoped>
.box-card{
width: 400px;
margin: 20px auto;
}
.block{
padding: 30px 24px;
background-color: rgb(27, 16, 16);
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
.link-title{
margin-left:35px;
}
.components-container {
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height: 100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
}
.left-container-twoOne {
background-color: rgb(110, 75, 75);
height: 100%;
}
.container-onetoOne {
background-color: rgb(47, 80, 74);
height: 100%;
width: 50%;
}
.container-onetoTwo {
background-color: rgb(61, 19, 56);
height: 100%;
width: 50%;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #57926b;
}
.bg-purple {
background: #7e2970;
}
.bg-purple-light {
background: #071c4d;
}
.grid-content {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 150px;
min-width: 100px;
}
.grid-contentB {
background-color: rgb(64, 56, 134);
border-radius: 4px;
min-height: 150px;
min-width: 100px;
}
.grid-a-contentWidth {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 100px;
}
.grid-a-content-a-Width {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 220px;
}
.grid-one-contentheight {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 100%;
}
.el-row-two {
margin-bottom: 80px;
margin-top: 80px;
}
</style>复制
效果:
![vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]](https://img-blog.csdnimg.cn/img_convert/656eaaaf58b61d71d4e495191c139676.gif)
css 栅格布局el-row（xs，sm，md，lg，xl）
qq_46302247
已于 2023-03-09 15:22:06 修改
阅读量1.7k
收藏 5
点赞数
分类专栏： css 文章标签： css 前端 javascript
版权
css
专栏收录该内容
5 篇文章1 订阅
订阅专栏
:xs="12" , 24/12=2 , 所以当屏幕尺寸<768px时(手机)，每行展示2个div(class="com_item");
:sm="8" , 24/8=3 , 所以当屏幕尺寸>=768px时(平板)，每行展示3个div(class="com_item");
:md="6" , 24/6=4 , 所以当屏幕尺寸>=992px时(桌面显示器)，每行展示4个div(class="com_item");
:lg="4" , 24/4=6 , 所以当屏幕尺寸>=1200px时(大桌面显示器)，每行展示6个div(class="com_item");
:xl="4" , 24/4=6 , 所以当屏幕尺寸>=1920px时(2k屏)，每行展示6个div(class="com_item");
1
2
3
4
5
6
7
8
9
<div>
<el-row :gutter="10">
<el-col
v-for="(item, index) in list"
:key="index"
:xs="12"
:sm="8"
:md="6"
:lg="4"
:xl="4"
style="margin-bottom: 20px;"
>
<div class="com_item":item="item" />
</el-col>
</el-row>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.com_item {
width: 100%;
height: 220px;
background: #bfa;
}
1
2
3
4
5
实现效果：
————————————————
版权声明：本文为CSDN博主「qq_46302247」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_46302247/article/details/128248001
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
