ElementUI之基础布局及混合布局

简介: ElementUI之基础布局及混合布局

1 引言

这次简单介绍Element-ui的基础布局,让同学们初步了解element-ui。

2方法

通过基础的 24 分栏,迅速简便地创建布局。

基础布局的定义:使用单一分栏创建基础的栅格布局。
通过 row(行) 和 col (单元格)组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。

分栏间隔:分栏之间存在间隔。
Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。

混合布局的定义:不按单一分栏创建基础的栅格布局。即在通过 row(行) 和 col (单元格)组件,并通过 col 组件的 span 属性来自由的布局。与基础布局的区别在于在同一个<el-row></el-row>下中的span属性并不相同。

修改分栏间隔:

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

3结语

针对Element-ui问题的基础布局及混合布局方法,通过在编译器的实验,简单说明了两个布局如何设置,让同学们初步了解了Element-ui。

目录
相关文章
|
10月前
|
并行计算 算法 异构计算
antv/g6之图布局及切换布局
antv/g6之图布局及切换布局
1083 0
|
4月前
|
UED
常见的布局方式
【10月更文挑战第22天】这些布局方式各有特点和适用场景,在实际开发中,通常会根据具体需求选择合适的布局方式或结合多种布局方式来实现理想的页面布局效果。
101 3
|
5月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
86 5
|
4月前
|
前端开发 容器
|
10月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
485 0
|
前端开发
CSS流动布局-页面自适应
CSS流动布局-页面自适应
154 0
|
编解码 前端开发 Android开发
移动布局基础(流式布局)
移动布局基础(流式布局)
146 0
|
前端开发 容器
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局
html+css实战184-布局完成
html+css实战184-布局完成
137 0
html+css实战184-布局完成