Flex实现环绕布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/51345017

    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>