html+css布局

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

用flex布局，怎样最快捷简单？


<style>
            .header {
                height: 750px;
                width: 700px;
                margin-top: 25px;
                background-color: wheat;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                flex-wrap: wrap;
            }

            .header .li {
                width: 20%;
                height: 30%;
                background-color: white;
            }
            .header .fa {
                width: 45%;
                height: 30%;
                background-color: white;
            }
            .header .yi {
                width: 30%;
                height: 30%;
                background-color: white;
            }
        </style>
    </head>

    <body>
        <div class="header">
            <div class="fa"></div>
            <div class="fa"></div>
            <div class="li"></div>
            <div class="li"></div>
            <div class="li"></div>
            <div class="li"></div>
            <div class="yi"></div>
            <div class="yi"></div>
            <div class="yi"></div>
        </div>
    </body>

具体的圆角什么的自己加就好了


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
    <style>
        .container{
            display: flex;    
            flex-wrap: wrap
        }
        .item{
            margin: 10px 5%;
            background: yellow;
            width: 40%    
        }
        .item:last-child{
            width:100%;
        }
        .item:nth-child(2n){
            width:40%;
        }
    </style>
</head>
<body>

<div class='container'>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    <div class='item'>
        a
    </div>
    </div>

</body>
</html>