布局模板应用

/*
  上中下布局，中间自适应（中间左边固定，右边自适应）  
*/
<style>
		*{
			margin:0;
			padding: 0; 
		}
		.header{
			width:100%;
			background-color:orange;
			height:45px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		 .flex-container {
		 	height: calc(100vh - 85px);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            background-color: #fff;
            /*justify-content: space-around;*/
            justify-content: space-between;
        }
        .flex-container .item{
        	width: 200px;
        	height: calc(100vh-85px);
        	background-color:skyblue;
        }
        .flex-container .flex-item {
            flex:1;/*中间右边自适应*/
            height: calc(100vh-85px);/*中间高度自适应*/
            background-color:lightsalmon;
        }
        .flooter{
        	height: 40px;
        	background: #000;
        	color: #fff;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        }
        #screen{
        	display: none;
        	position: absolute;
        	width: 100%;
        	height: 100%;
        	background: #eee;
        	z-index: 999999;
        	text-align: center;
        	top: 0;
        	left: 0;
        	right: 0;
        	bottom: 0;
        }
        @media screen and ( max-width: 900px ) {
        	#screen{
        		display: block;
        	}
        }
       
	</style>

    <div class="warp">
		<div id="screen">
			<div style="margin-top:200px;">浏览器分辨率过低!最低分辨率为900！</div>
		</div>
		<div class="header">头部</div>
		<div class="flex-container">
	        <div class="item">中间最左边</div>
	        <div class="flex-item">中间最右边</div>
	    </div>
	    <div class="flooter">底部</div>
	</div>