Element UI学习记录之布局

一、Layout布局

二、Container布局容器

Element UI学习记录之布局

一、Layout布局

基本概念：一行通过分割为24栅格栏进行布局，如果要占满一行如下:

<!--el-row 表示一行-->
<!--el-col 表示一列-->
<el-row><el-col :span="24">24</el-col>
</el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。并且可以在<style></style>标签中设置CSS样式。以下为LayoutView.vue代码：

<template><div class="layout"><!--el-row 表示一行--><!--el-col 表示一列--><el-row><el-col :span="24">24</el-col></el-row><el-row><el-col :span="16">16</el-col></el-row><el-row type="flex" justify="center"><el-col :span="6">24</el-col><el-col :span="6">24</el-col><el-col :span="6">24</el-col></el-row><el-row type="flex" justify="start"><el-col :span="6">24</el-col><el-col :span="6">24</el-col><el-col :span="6">24</el-col></el-row></div></template><script>
export default {name: "LayoutView"
}
</script><style scoped>.el-row{background-color: #42b983;margin: 20px;}.el-col{background-color: #2c3e50;color: white;padding: 10px;border-right: 1px solid white;}
</style>

展示结果如下：

还可以通过flex布局来对分栏进行灵活的对齐。将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

二、Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

下面分享一个简单的例子ContainerView.vue：

<template>
<div class="container"><el-container><el-header>header</el-header><el-container><el-aside>aside</el-aside><el-main>main</el-main></el-container><el-footer>footer</el-footer></el-container>
</div>
</template><script>
export default {name: "ContainerView"
}
</script><style scoped>
.el-container{background-color: #eee;color: white;
}
.el-header{background-color: #2c3e50;height: 400px;
}
.el-footer{background-color: #42b983;
}
.el-aside{background-color: sienna;max-width: 200px;min-height: 350px;
}
.el-main{background-color: purple;min-height: 350px;
}
</style>

展示效果如下：

Element UI学习记录之布局相关推荐

element ui搜索栏响应式布局
需求(主要根据自己需求): 在做系统模块中,需要搜索的功能比较多,比如时间.name.导出.导入等等.搜索栏不能在同一行(根据领导需要)(记录问题,不喜勿喷) 问题描述: 不是说屏幕小很正常,但是屏幕 ...
element ui 控件与布局学习(自用)
(开始之前:=>如果你的学习经历坎坷或学校垃圾或者讨厌前端而; 不知道如何使网页缩放页面布局不变只会吞噬布局)=>body中加上min-width: 1300px;就好了 <body ...
Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能. 在有限空间内,循环播放同一类型的图片.文字等内容. 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法. 1.基础用法 1.默认 ...
element UI 学习
记录下,自己搭建这个网站(古典小说网) 初始elementUI版本的过程目录一.搭建环境 1.引入JS .CSS 2.VUE 二.布局三.导航 1.参考官网导航介绍,设置自己的导航 2.发现有 ...
Element Ui 学习笔记(部分)
border-radius 边界半径 margin-bottom 页边距底部 grid-content 网格内容 min-height 最小高度 padding 凑篇幅的文字 gutter 檐沟(属性 ...
学习记录 flex布局（弹性盒子）flex-direction
基于学习的软件: VSCodeUserSetup-x64-1.52.1.exe Flex翻译为"弹性",通过给元素设置display属性,属性值为flex或者inline-flex ...
vue element UI 学习总结笔记（九）_ 导航菜单与路由
获取用户信息我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息. router.beforeEach((to, from, next) => {if ( ...
Element UI学习4--NavMenu 导航菜单
1.顶栏导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式. 在菜单中通过submenu组件可以生成二级菜单. <tamplate> <div> <e ...
flex布局学习记录
推荐阮一峰写的flex布局博客,这里我只是说下自己的学习记录. flex布局可以实现响应式布局. 兼容性: 实现flex布局,要有父容器和子元素. 将父容器设置为display:flex. 父容器设置 ...

Element UI学习记录之布局

Element UI学习记录之布局

一、Layout布局

二、Container布局容器

Element UI学习记录之布局相关推荐

最新文章

热门文章