Flex实现环绕布局

	html,body{
		width: 100%;
		height: 100%;
	}
	html,body,ul,li,a{
		padding: 0;
	    margin: 0;
	    list-style-type: none;
	    text-decoration: none;
	}
	.sup{
		height: 100%;
		width: 100%;
		display: flex;
		flex-wrap:wrap;//超行换行方式
	}
	.sub1{
		height: 300px;
		width: 80%;
		flex: none;
		background-color: #FF8000;
	}
	.sub2{
		height: 600px;
		width: 20%;
		margin-top: -21.1%;//自己调节吧
		flex: none;
		background-color: #FFFF80;
	}
	.sub3{
		height: 600px;
		width:20%;
		flex: none;
		background-color: #FF8080;
	}
	.sub4{
		height: 300px;
		width: 80%;
		flex: none;
		background-color: #80FF80;
	}	

<div class="sup">
 <div class="sub1"></div>
 <div class="sub2"></div>
 <div class="sub3"></div>
 <div class="sub4"></div>
</div>