基于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）对于大量查询条件同样适用