flex、绝对定位的三栏布局，以及flex的扩充

在上一篇文章写了两栏等高、双飞翼和圣杯三栏布局。今天来继续完善三栏布局方式以及对flex布局继续完善。

三栏布局依然是下面这样。

flex

	content
	
left
	
right

.body {display: flex;}
.left,.right {/*左右两列定宽200px*/flex:0 0 200px;height: 200px;background-color: pink;}
.left{order:-1}
.content {flex:1;height: 200px;background-color: yellow;}

绝对定位

	
content
	
left
	
right

.body{position:relative;min-width:500px}
.content,.left,.right{height:200px;top:0}
.left,.right{background:pink;position:absolute;width:200px}
.left{left:0}
.right{right:0}
.content{margin:0 200px 0 200px;background:red}

上面用flex弹性盒子和position:absolute绝对定位完成了三栏布局，下面将对flex组成的三栏布局进行扩充，成下面这样

以下是相关代码

header
	

		
content
		
left
		
right
	
footer

body{min-height:100vh;display:flex;flex-direction: column;}
header,footer{flex:1}
header{background:red}
footer{background:blue}
.body{flex:3;display:flex}
.content,.left,.right{}
.left,.right{flex:0 0 12rem}
.left{background:pink;order:-1}
.right{background:gray}
.content{background:yellow;flex:1}

下面继续来完善，当窗口缩小到768px以下时，呈现出：

只需要加上媒体查询，就可以实现上图

@media (max-width:768px){
 		.body{flex-direction:column;flex:8}
 		.left,.right{flex:1}
 		.content{flex:4}
        }