elemenetui 布局_vue vue-element-ui组件 layout布局

最新推荐文章于 2025-07-02 14:51:17 发布

原创最新推荐文章于 2025-07-02 14:51:17 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elemenetui 布局

本文介绍了ElementUI的布局基础知识，包括row和col组件的使用，详细讲解了span属性、gutter属性、offset属性以及对齐方式。还探讨了响应式布局的实现，提供了一系列代码示例和效果展示，帮助开发者更好地理解和应用ElementUI的布局功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文仅供参考：

首先你要掌握的基础知识:

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

使用方式:

练习示例:

方块选择:

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