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>