elemenetui 布局_vue vue-element-ui组件 layout布局
本文仅供参考：
首先你要掌握的基础知识:
row 行概念
col 列概念
col组件的:span属性的布局调整,一共分为24栏:
代码示例:
效果展示:
代码示例：
效果展示:
row组件的:gutter属性来调整布局之间的宽度---分栏间隔
代码示例:
效果:
Col组件的:offset属性调整方块的偏移位置(每次1格/24格)
效果:
对齐方式:
row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:
justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐
效果:
响应式布局:
参考bootstrap的响应式，预设四个尺寸
xs <768px
sm ≥768px
md ≥992
lg ≥120
使用方式:
练习示例:
方块选择:
{{ option.name }}
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‘ }
],
布局代码:
样式(从里面对应取一下):
.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;
}
。
原文链接：https://blog.csdn.net/jack_bob/java/article/details/79813114
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！