Element-Plus el-col、el-row快速布局
文章目录
- 前言
- 一、el-col
- span
- push & pull
- 响应式
- offset
- 二、el-row
- gutter
- justify
- align
- 总结
前言
拖拉了一晚, 总结了一些Layout布局工具的使用方法.
一、el-col
本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸).
el-col是el-row的子元素.
在el-row添加
style="flex-direction: column;"
可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;
span
规定一个col占据24份中的多少份.
倒也不是必加的属性…
当el-row中仅有一个el-col时, 该el-col默认占据全部的24份, 填满el-row.
但是如果多个el-col情况下不加, 效果会比较糟糕, 第一个el-col依旧占据第一行的全部24份, 但是其他el-col会被挤到换行(倒也不会挤出el-row), 就像这样:
黄, 蓝, 绿, 分别为第一二三个el-col, 都不传span值.
<el-row class="dark"><el-col class="yellow"><sy-author-1></sy-author-1></el-col><!-- 分隔 --><el-col class="blue"><div></div></el-col><!-- 分隔 --><el-col class="green" ><div></div></el-col></el-row>
* {transition: 1s;
}.dark {background-color: rgb(137, 133, 133);
}.yellow {background-color: rgb(176, 170, 80);
}.green {background-color: rgb(85, 144, 135);
}.blue {background-color: rgb(65, 115, 153);
}
就说正常加span的情况下, 页面使用el-row后, 横向距离被等量的分为24份, el-col的span属性决定的是"这个el-col在横向占据24分之几个el-row".
比如这次span分别是8、5、8, 那么剩下3份空间没用上, 也就是右边的灰色部分, 暴露出el-row的颜色.
push & pull
pull和push控制col的横向位移, 以份为单位 最大值24超出无效.
push和pull不会影响“横向被分为24份”这个规则, 比如第一个el-col被:push=“1”, 最后一个el-col被:pull=“1”, 中间的三个el-col还是可以各占8份, 只不过会有重叠的情况.
<el-row class="dark"><el-col :span="8" class="yellow" :push="2"> <!-- 左边push两份 --><sy-author-1></sy-author-1></el-col><!-- 分隔 --><el-col class="blue" :span="8"><div></div></el-col><!-- 分隔 --><el-col class="green" :span="8" :pull="2"> <!-- 右边pull两份 --><div></div></el-col>
</el-row>
虽然依旧各占8份, 但是蓝盒子被左右两侧遮盖了.
所有el-col没有发生尺寸上的变化.
响应式
提供一个专门的属性, 让使用者规定在该属性对应的分辨率下, col要怎样进行排列.
响应式属性(xs, lg等)接受传入对象类型和数字类型;
对象类型可用于规定offset和span等属性, 针对每个分辨率范围定制一套合适的样式:
属性 | 说明 |
---|---|
xs | 小于768 |
sm | 大等于768 |
md | 大等于992 |
lg | 大等于1200 |
xl | 大等于1920 |
来写个栗子看一下, 规定小于768, 大于992, 大于1200时的排列:
这个例子有一些缺陷, 请读完例子下面的部分.
<el-row class="dark"><el-col:xs="{ span: 22, push: 1, pull: 1 }":md="{ span: 18, push: 3 }":lg="{ span: 8, push: 1 }"class="yellow"><div></div></el-col><!-- 分隔 --><el-col:xs="{ span: 22, pull: 1, push: 1 }":md="{ span: 16, push: 2 }":lg="{ span: 8, push: 0 }"class="blue"><div></div></el-col><!-- 分隔 --><el-colclass="green":xs="{ push: 1, pull: 1, span: 22 }":md="{ span: 14, push: 1 }":lg="{ span: 7, pull: 1, push: 0 }"><div></div></el-col>
</el-row>
其实写案例的时候还发现了一个问题, 响应式方案里的属性是可以继承的, 这样说倒也不准确…
表现出来就是:
设置了md的push, span后, 如果不设置lg的push, 那么lg方案会采用用md方案的push / pull, 而不是默认的pull / push为0, 这个问题会发生在各组方案之间, 只要有一组方案缺少属性, 它就从上一组方案里拿属性:
<!-- 这里pull无效, 所以没写... -->
<!-- 因为蓝色块出的问题, 所以只放个蓝色块 -->
<el-col:md="{ span: 16, push: 2 }":lg="{ span: 8 }"class="blue"
><div></div>
</el-col>
然后lg状态就变成这样了, 你可以看到蓝块左侧空出来了一块, 这就是lg方案从md偷的push:2.
这个时候再规定lg的push为0:
<el-col:md="{ span: 16, push: 2 }":lg="{ span: 8, push:0 }"class="blue"
><div></div>
</el-col>
所以用响应式的时候, 规定方案要把每一项都详细规定好, 避免从其他方案继承到属性, 出现一些奇怪的效果.
pull在响应式方案里有时会失效, 比如我们现在这个例子, 我给了第三个col一个lg状态下的pull:1, 什么效果都没有:
但是在xs方案中, pull:1生效了:
也不是因为没有多余空间可以移动的问题, 事实是有多余空间它也无效…
没能解决这个问题.
offset
我把这个放在最后是因为写案例的时候出现了一点小状况, 我发现我的offset不能生效, 是那种…怎么改都不生效.
然后一次偶然, 我把css里的:
* {margin: 0;padding: 0;}
删了, 然后解决了, 就挺无语的, 可能是el组件里的样式优先级比较低, 被覆盖了吧.
好吧, 那步入正题
offset规定col左侧的间隔份数, 它是真的能把col给挤到下一行的
<el-row class="dark"><el-col:lg="{ span: 8, push: 0 }"class="yellow"><div></div></el-col><!-- 分隔 --><el-col:lg="{ span: 8, push: 0, pull: 0, offset: 9}"class="blue"><div></div></el-col><!-- 分隔 --><el-colclass="green":lg="{ span: 8, pull: 0, push: 0 }"><div></div></el-col>
</el-row>
效果:
不要offset来做换行, 用响应式或者在el-row添加
style="flex-direction: column;"
会更好, offset达成的换行, 左侧会有空间, 就像上面动图的蓝块就是offset导致的换行, 不稳定而且难看.
二、el-row
“row” 中文即"排, 行"的意思, el-row组件即创建一行.
使用后自动占据页面横向全部空间, 并且把横向空间不可见的分割为24份.
在el-row添加
style="flex-direction: column;"
可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;
gutter
官方给的解释是"控制栅格间距", 我理解的是控制el-col之间的横向间距, 其实这有点像justify-content,写在外面控制里面.
但是我写了一个demo来测试的时候, 发现它控制的似乎是el-col的子元素与el-col左边框的间距, 而并非el-col之间的间距.
以下面这段代码为例, 一个el-row里装了三个el-col, 初始gutter为0.
<el-row class="dark" :gutter="0"><el-col :span="8" class="yellow"><sy-author-1></sy-author-1></el-col><!-- 分隔 --><el-col class="blue" :span="8"><div></div></el-col><!-- 分隔 --><el-col class="green" :span="8"><div></div></el-col></el-row>
现在把gutter增加到80, 可以看到, el-col之间的距离始终是不变的:0, 但是除去最左边的组件, 每个el-col的子元素和它们所在el-col的左边距都增加了.
这次增加是由el-col宽度的双向扩大和子元素向右位移共同完成的:
那么这是对于一个子元素, 如果对于多个同在一行的子元素, 全部子元素的左边距也并不会都增加:
这些子元素更像是被看作一个整体.
justify
el-row中所有el-col的横向对齐方式.
但这是建立在el-row横向还有空间的前提下, 如果el-row横向24份已经塞得满满当当, 那这个属性给什么值都不会有效果的.
属性 | 可取值 |
---|---|
justify | start / end / center / space-around / space-between / space-evenly |
那还是用第一段代码举例:
<el-row class="dark" justify="center"> <!-- 居中对齐 --><el-col :span="8" class="yellow"><sy-author-1></sy-author-1></el-col><!-- 分隔 --><el-col class="blue" :span="5"> <!-- 注意这里改成5了, 我们不能把el-row填满 --><div></div><span>哦哦哦</span></el-col><!-- 分隔 --><el-col class="green" :span="8"><div></div></el-col>
</el-row>
那现在可以看到现在el-col都挤到中央了, 其实这个挺像justify-content的.(弹性布局)
他们封装的时候是不是就拿这个直接给justify-content传值的…我猜…
然后space-between情况下:
均匀分布两侧贴边.
在el-col分多行的情况下:justify=“end”:
<el-row class="dark" justify="end"><el-col:lg="{ span: 8, push: 0 }"class="yellow"><div></div></el-col><!-- 分隔 --><el-col:lg="{ span: 8, push: 0, pull: 0, offset: 9}"class="blue"><div></div></el-col><!-- 分隔 --><el-colclass="green":lg="{ span: 8, pull: 0, push: 0 }"><div></div></el-col>
</el-row>
效果:
align
el-row中所有el-col的纵向对齐方式, 前提是纵向还有空间, 所以规定el-col的高度应该会是不错的选择, 不然纵向默认填满el-row, 这个属性就彻底失效了.
三个可用值:
属性 | 可用值 |
---|---|
align | top / middle / bottom |
默认是top, 这个情况下不给el-col高度, el-col也会在纵向占满el-row, 但是另外两个属性…
align="bottom"
align="middle"
多行情况:
<el-row class="dark" align="middle"><el-col:lg="{ span: 8, push: 0 }"class="yellow"><div></div></el-col><!-- 分隔 --><el-col:lg="{ span: 8, push: 0, pull: 0, offset: 9 }"class="blue"><div></div></el-col><!-- 分隔 --><el-colclass="green":lg="{ span: 8, pull: 0, push: 0 }"><div></div></el-col>
</el-row>
* {transition: 1s;
}.dark {height: 500px;background-color: rgb(137, 133, 133);
}.yellow {background-color: rgb(176, 170, 80);height: 100px;
}
.green {background-color: rgb(85, 144, 135);height: 100px;
}.blue {background-color: rgb(65, 115, 153);height: 100px;
}
总结
约到一场15日的面试, 但是封校不得不推掉了, 很难受.
如果这篇文章帮到你, 我很荣幸.
Element-Plus el-col、el-row快速布局相关推荐
- 如何用CSS快速布局(一)—— 布局元素详细
要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...
- java el jstl_java -EL技术JSTL技术
EL技术 EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本(java代码)的编写. EL从域中取出数 ...
- PCB之AD快速布局
PCB之AD快速布局 1.先将元件更新到PCB,然后将鼠标箭头放到PCB上,右键单击Split Vertical,分割视窗: 2.工具栏点击Tools→Cross Select Mode,或者在Pre ...
- 【AD小知识】PCB之自动布线及快速布局技巧
自动布线 暂时具体的改规则还不太了解,暂时先知道大概步骤吧.. 在PCB布线页面选择, Auto route -> All 暂时的默认选项,选择route all即可. 快速布局 先把PCB和s ...
- 短视频有哪些推广引流方法 ?如何快速布局短视频推广?
做短视频运营的时候,推广也是日常运营中的一部分,但很多朋友对于如何进行短视频的推广引流还处于一个陌生的阶段,下面给大家分享关于短视频推广引流方法 如何快速布局短视频推广的相关内容. 做品牌营销要知道, ...
- CF821 E. Okabe and El Psy Kongroo 矩阵快速幂
LINK 题意:给出$n$条平行于x轴的线段,终点$k$坐标$(k <= 10^{18})$,现在可以在线段之间进行移动,但不能超出两条线段的y坐标所夹范围,问到达终点有几种方案. 思路:刚开始 ...
- cf 821E Okabe and El Psy Kongroo(矩阵快速幂)
链接:http://codeforces.com/problemset/problem/821/E 分析:由于有边界而且不同段边界还不同,直接算是不行的..k是1e18,dp也不行..用一个16维的向 ...
- Ansible:Ansibl项目生产环境快速布局
Tips:与前文 <进击的 Ansible(一):Ansible 快速入门> 一样,本文使用的 Ansible 版本 2.5.4,项目演示环境 MacOS.由于 Ansible 项目开发活 ...
- vant 动态 粘性布局_CSS Viewport 单位,很多人还不知道使用它来快速布局!
**CSS Viewport units(视口单位)**在过去几年已经出现了,随着时间的推移,越来越多的开发人员开始使用它们.它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态 ...
最新文章
- Android基础新手教程——1.5.2 Git之使用GitHub搭建远程仓库
- [HNOI2008]遥远的行星
- saltui试用遇到的问题
- 非标自动化企业前十名_非标设备的现状
- 【Python基础】在pandas中利用hdf5高效存储数据
- Spring中BeanPostProcessor 执行过程
- Log 日志的使用与重要性
- Java基础知识强化68:基本类型包装类之Character概述和Character常见方法
- linux下的shell多线程用法,shell多线程操作
- Atitit 股票选取指南attilax总结
- 基于python的-使用正则表达式验证手机号
- 程序员软件工程常用的画图软件推荐
- IE插件加载题目调试
- 动易cms .net版本后台拿shell
- python将视频帧转化成图片时,出来的是灰色图像
- 随机向量x的协方差阵_统计不相关:两个随机向量x(?)与y(?)统计不相关,若它们的互协方差矩阵不等于零矩阵,即Cxy = O。...
- base64上传为表单提交给后台的方法
- python求打几场比赛-用python实行羽毛球比赛规则。
- 开启少儿武术展演 弘扬中华传统文化
- libreoffice转换文档的方法(支持各平台各版本的libreoffice)
热门文章
- C语言:计算1/1-1/2+1/3-1/4+1/5.......+1/99-1/100的值
- linux匹配查找满足多个条件,利用Linux的find命令查找符合条件的文件
- java和python哪个运行速度快_Python与Java-你首选哪个?
- php控制台输出视频教程,js如何实现控制台输出
- JAVA商品信息查询的功能
- ARM架构下在qemu模拟器中汇编实现:统计输入字符串长度并且判断是否回文
- 邮件发送(邮件服务器和邮件客户端)
- 4的幂(Power of Four)
- C语言字节序对齐以及空间利用率
- 开公司的心得-租房子,得注意!