基于FlexBox的无约束自适应
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11972664.html,多谢,=。=~
一、背景描述
对于通用型带过滤条件的列表查询项目中,列举下面两种常见功能需求,要满足内容高度、宽度自适应:
1、上中下布局,包括查询条件、卡片数据、分页;
2、上中下布局,包括查询条件、表格数据、分页;
二、现状分析
最常用的经典方法是position定位加上top和bottom属性实现高度自适应,该方式存在的最大问题在于只能实现上中下其中一个模块的高度自适应,剩余模块的高度需要固定,与此同时还需满足查询条件的宽度自适应。
常见的实现方式有以下3种,并分别阐述它们存在的问题。
方式1:固定查询条件的高度和最小宽度,需要让视觉量身定制出一套完美的展现方式,控制每项查询条件的宽度,使得在浏览器宽度变窄时也能完全展示。
存在的问题:查询条件数量较多时通常会被固定成两行或三行展示,导致多余空间占用,如果使用iframe嵌套时最小宽度与容器不统一还会出现内部滚动条。若新需求需要新增查询条件,则需要视觉重新设计,同时前端人员需要修改样式代码。
方式2:采用媒体查询@media,需要让视觉根据常见屏幕宽度做适配,前端再根据不同屏幕宽度撰写相应样式代码。
存在的问题:代码量大、复杂度高,屏幕尺寸覆盖不全,范围边界值不准确会导致显示异常,同样对于有需求新增查询条件的情况,视觉设计及前端代码变动较大。
方式3:查询条件高度自适应,表格高度固定。
存在的问题:页面空间没有充分利用,有大量留白,不利于用户体验。
三、解决方案
针对上面的问题,我们可以采用flexbox布局解决,同时实现查询条件、卡片/列表数据两个模块高度自适应和全局宽度自适应。
1、基本概念
(1)容器(container):一个设有display:flex;
的元素;
(2)项目(item):容器的直接子元素;
2、属性及参数
FlexBox布局属性分为容器属性和项目属性,具体属性、参数值及其含义可以参见我之前写的:https://www.cnblogs.com/dreamsqin/p/10883286.html
3、关键代码
在撰写页面样式前,首先我们需要设置一个全局的100%高度。对于vue项目,需要设置入口组件App.vue的高度样式:
#app{
height: 100%;
}
对于html静态页面,需要设置html及body的高度样式:
html,body{
height: 100%
}
接下来就可以愉快的编写页面代码了,demo的视图组件用Element-ui实现,页面结构关键代码如下:
<div class="search-page">
<div class="top">
<div class="top-main">
<!--这里通常是el-form的查询条件表单-->
<div class="form-button">
<el-button
class="conditionButton"
type="primary"
@click="handleSearch">
查询
</el-button>
<el-button
class="conditionButton"
@click="onReset">
重置
</el-button>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-main-export">
<!--这里一般放数据导出的按钮或者下拉菜单-->
</div>
<div class="bottom-main-data">
<!--这里一般放el-table表格数据或者el-scrollbar可以滚动的卡片数据-->
</div>
<div class="bottom-main-paging">
<div class="block">
<!--这里一般放el-pagination分页组件,我们的分页表格采用了表格和分页组件分开的方式,在HUI2.X中也去除了分页表格组件,所以该布局完全适用于HUI2.X-->
</div>
</div>
</div>
</div>
下面是对应页面的less样式关键代码:
.search-page{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top{
width: 100%;
padding-top: 16px;
.top-main{
display: flex;
.form-button{
min-width: 202px;
display: flex;
align-items: flex-end;
.el-button{
width: 96px;
margin-bottom: 16px;
}
}
}
}
.bottom{
width: 100%;
border: 8px solid #f6f6f6;
flex: 1;
display: flex;
flex-direction: column;
.bottom-main-export{
width: 100%;
height: 48px;
padding: 8px;
display: flex;
justify-content: flex-end;
}
.bottom-main-data{
width: 100%;
flex: 1;
display: flex;
}
.bottom-main-paging{
width: 100%;
height: 49px;
}
}
}
4、可实现效果
(1)查询条件高度自适应,对于没有表格数据的情况也能撑开整个页面
(2)查询条件随页面宽度自动换行,同时不影响表格数据高度的自适应
(3)对于大量查询条件同样适用
基于FlexBox的无约束自适应的更多相关文章
- 基于粒子群优化的无约束50维Rosenbrock函数求解
基于粒子群优化的无约束50维Rosenbrock函数求解 一.问题重述 无约束50维的Rosenbrock函数可以描述如下: 其中, 0 要求按PSO算法思想设计一个该问题的求解算法. Rosenbr ...
- Kerberos无约束委派的攻击和防御
0x00 前言简介 当Active Directory首次与Windows 2000 Server一起发布时,Microsoft就提供了一种简单的机制来支持用户通过Kerberos对Web服务器进行身 ...
- 基于jQuery编写的横向自适应幻灯片切换特效
基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6. 适用浏览器:IE6.IE7.IE8.360.Fire ...
- Bulma - 基于 Flexbox 的现代化的 CSS 框架
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...
- 基于统计的无词典的高频词抽取(二)——根据LCP数组计算词频
接着上文[基于统计的无词典的高频词抽取(一)——后缀数组字典序排序],本文主要讲解高频子串抽取部分. 如果看过上一篇文章的朋友都知道,我们通过 快排 或 基数排序算出了存储后缀数组字典序的PAT数组, ...
- 02(e)多元无约束优化问题- 梯度的两种求解方法以及有约束转化为无约束问题
2.1 求解梯度的两种方法 以$f(x,y)={{x}^{2}}+{{y}^{3}}$为例,很容易得到: $\nabla f=\left[ \begin{aligned}& \frac{\pa ...
- elf,基于flexbox的响应式CSS框架
官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...
- 聊聊高并发(三十二)实现一个基于链表的无锁Set集合
Set表示一种没有反复元素的集合类,在JDK里面有HashSet的实现,底层是基于HashMap来实现的.这里实现一个简化版本号的Set,有下面约束: 1. 基于链表实现.链表节点依照对象的hashC ...
- 基于Office 365 无代码工作流分析-需求基本分析!
客户需求分析: 嘉昊信息是一家IT创业型公司,因为公司初创,有较多的招聘员工的需求,公司近期购买了Office 365,因为招聘工作繁琐,HR人员须要做非常多反复繁琐工作,HR主管提议开发一个招 ...
随机推荐
- PHP MySQL数据分页
SQL SELECT语句查询总是可能导致数千条记录.但是在一个页面上显示所有结果并不是一个好主意.因此,我们可以根据要求将此结果划分为多个页面.分页意味着在多个页面中显示您的查询结果,而不是仅将它们全 ...
- 【Qt编程】基于QWT的曲线绘制及图例显示操作——有样点的实现功能
在<QWT在QtCreator中的安装与使用>一文中,我们完成了QWT的安装,这篇文章我们讲讲基础曲线的绘制功能. 首先,我们新建一个Qt应用程序,然后一路默认即可.这时,你会发现总共有: ...
- LeetCode: 404.左叶子节点
计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 解析 我们需要找到这样的节点 属于叶子节点 属于父 ...
- AI 图像识别的测试
随着AI 的浪潮发展,AI 的应用场景越来越广泛,其中计算机视觉更是运用到我们生活中的方方面面.作为一个测试人员,需要紧跟上 AI 的步伐,快速从传统业务测试,转型到 AI 的测试上来.而人脸识别作为 ...
- github 分支管理
github 分支管理 最近有同事问我git 如何管理分支,这里我以github为例,做下工作中常用的分支管理操作. 分支管理 作用:假设你准备开发一个新功能,但需要两周才能完成,第一周写了60%,如 ...
- 【Spring Boot】Spring Boot之使用ImportSelector类实现动态注册Bean
一.ImportSelector类介绍 可以通过指定的选择条件来决定哪些类被注册到Spring中.与ImportBeanDefinitionRegistrar类功能相似,通过@Import的方 ...
- 9. [mmc subsystem] host(第三章)——sdhci-pltfm说明
一.sdhci-pltfm说明 sdhci-pltfm并不是实际某个host的driver. sdhci-pltfm是指在sdhci core的基础上,提供了统一对sdhci_host的必要属性进行解 ...
- 队列(Quene)
对multiprocessing中的Quene进行演示 import multiprocessing """ 队列Quene是mutiprocessing 中 的一个类 ...
- Linux(Centos7)搭建LAMP(Apache+PHP+Mysql环境)
目录 Linux搭建LAMP(Apache+PHP+Mysql环境)Centos7 一. 检查系统环境 1.确认centos版本 2.检查是否安装过apache 3.检查是否安装过Mysql 4.清理 ...
- PHP数组相关算法
一.排序算法 1. 冒泡排序 2. 选择排序 二.查找算法 1. 遍历 2. 二分查找