vuevue-element-ui组件layout布局系列学习（⼀）
本⽂仅供参考：
⾸先你要掌握的基础知识:
row⾏概念
col列概念
col组件的:span属性的布局调整,⼀共分为24栏:
代码⽰例:
效果展⽰:
代码⽰例：
效果展⽰:
row组件的:gutter属性来调整布局之间的宽度---分栏间隔
代码⽰例:
效果:
Col组件的:offt属性调整⽅块的偏移位置（每次1格/24格）
效果:
对齐⽅式:
row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版⽅式，属性值分别有:
y=center居中对齐
y=start左对齐
y=end右对齐
y=space-between空格间距在中间对齐
y=space-around左右各占半格空格对齐
效果:
响应式布局:
参考bootstrap的响应式，预设四个尺⼨
<768px
≥768px
≥992
≥120
使⽤⽅式:
练习⽰例:
{{}}
data默认初始化数据:
lected: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'}
],
布局代码:
样式(从⾥⾯对应取⼀下):
.box-card{
width:400px;
margin:20pxauto;
}
.block{
padding:30px24px;
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{
.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;
}
效果:
本文发布于:2022-12-08 07:34:38，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/88/64640.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
