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>