flex实现上下固定宽度中间自适应和左边固定宽度右边自适应布局

我们先美化一下chrome滑块

::-webkit-scrollbar {
	width: 6px;
	height: 8px;
	background-color: #ddd;
}

/*滑块*/
::-webkit-scrollbar-thumb {
	background-color: #666;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #888;
}

/*滑道*/
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px #eee;
	border-radius: 16px;
}

重置全局样式

* { 
    margin: 0; 
    padding: 0;
    font-size: 14px;
    line-height: 1.2;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

flex布局样式

.flex-wrapper {
	display: flex;
	height: 100%;
	flex-direction: column;
}
.flex-header {
	height: 50px;
	display: flex;
	flex: 0 0 auto;
	background-color: gray;
}
.flex-body {
	display: flex;
	flex: 1;
	height: calc(100% - 50px);
}
.flex-aside {
	width: 200px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.flex-title {
	height: 30px;
	background-color: green;
}
.flex-menus {
	flex: 1;
	overflow-y: auto;
	background-color: red;
}
.flex-container {
	flex:1;
	display: flex;
	height: 100%;
	flex-direction: column;
}
.flex-search {
	height: 50px;
	background-color: pink;
}
.flex-content {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
}
.flex-pager {
	height: 30px;
	background-color: yellow;
}

flex布局html

<div class="flex-wrapper">
    <div class="flex-header">flex-header</div>
    <div class="flex-body">
    	<div class="flex-aside">
    		<div class="flex-title">flex-title</div>
    		<div class="flex-menus">
    			<p style="height: 800px;">flex-menus</p>
    		</div>
    	</div>
    	<div class="flex-container">
    		<div class="flex-search">flex-search</div>
    		<div class="flex-content">
    			<p style="height: 2000px;">flex-content</p>
    		</div>
    		<div class="flex-pager">flex-pager</div>
    	</div>
    </div>
</div>

flex是一种很强大的弹性布局方式，也是现阶段比较流行的页面布局。从我个人经历过的table到float再到现在flex来看，真的是一种很强大的页面布局方式，帮我们省去了很多中间环节。简单的几行代码便写出以前很多奇技淫巧才能做出的效果。👍