知识了解不是很多看过一点课程大概知道基础知识一点点

img
这个布局里的最中间的盒子的flex布局应该如何实现啊，希望各位厉害的人能帮帮忙康康，一直在往代码里试图实现左边距但是怎么都实现不了
这是代码的相关要求：中间部分的padding为10px，里面每个内容padding都为12px,margin都为24px 12px，文字15px,黑色，居中。每一个内容的大小均为自适应，可以使用flex布局
这是我的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动员张继科</title>
</head>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
  }
body{
    min-width:700px;
  }
h3{
    padding: 0 20px
}
.header{
    width: 100%;
    height: 100px;
    background-color: black;
    color: white;
    font-size: 30px;
    display: block;
    line-height: 100px;
    text-align: center;
}
.footer{
    width: 100%;
    height:100px;
    margin-top: 700px;
    background-color: black;
    color: white;
    font-size: 30px;
    display: block;
    line-height: 100px;
    text-align: center;
}
.middle{
    float:left;
    width: 100%;
    height: 700px;
    text-align: center;
    background-color: white;
}
.box{
    width:80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center ;
    align-content: center;
    flex-wrap: wrap;
 }
.item{
    width:45%;
    height:50px;
    padding: 10px;
}
.small-box{
    background:black;
    width:100%;
    height:100%;
    margin-left: 24px;
    margin-right: 12px;
}
.container{
    width:45%;
    height:50px;
    padding: 10px;
    margin-left: 24px;
    margin-right: 12px;
}
.three-box{
    background:black;
    width: 100%;
    height:100%;
    margin-left: 24px;
    margin-right: 12px;
}
.left{
    float: left;
    width:200px;
    height: 700px;
    margin-left: -100%;
    background-color:green;
    font-size: 10px;
    color: black;
    text-align: center;
}
.right{
     background:green;
     width:200px;
     height: 700px;
     float: left;
     margin-left:-200px;
     font-size: 10px;
     color: black;
     text-align: center;
   }
</style>
</head>
<body> 
    <div class="header">
        <h3>header</h3>
    </div>
<div class="middle">
    <div class="box">
        <div class="item">
            <div class="small-box"></div>
        </div>
        <div class="item">
            <div class="small-box"></div>
        </div>
        <div class="container">
            <div class="three-box"></div>
        </div>
        <div class="container">
            <div class="three-box"></div>
        </div>
        <div class="container">
            <div class="three-box"></div>
        </div>
    </div>
</div>
    <div class="left">
<h3>left</h3>
</div>
    <div class="right">
<h3>right</h3>
</div>
<div class="footer">
    <h3>footer</h3>
</div>
 </body>
</html>

你大概看看，我写了第一个的例子


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动员张继科</title>
</head>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
  }
body{
    min-width:700px;
  }
h3{
    padding: 0 20px
}
.header{
    width: 100%;
    height: 100px;
    background-color: black;
    color: white;
    font-size: 30px;
    display: block;
    line-height: 100px;
    text-align: center;
}
.footer{
    width: 100%;
    height:100px;
    background-color: black;
    color: white;
    font-size: 30px;
    display: block;
    line-height: 100px;
    text-align: center;
}
.content{
    width: 100%;
    height: 700px;
    display: flex;
}
.left{
    width:200px;
    background-color:green;
    font-size: 10px;
    color: black;
    text-align: center;
}
.right{
     background:green;
     width:200px;
     font-size: 10px;
     color: black;
     text-align: center;
}
.middle{
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: white;
}
.one{
    display: flex;
}
.one div{
    margin: 24px 12px;
    padding: 12px;
    flex: 1;
    border: 1px solid #000;
    border-radius: 6px;    
}
</style>
</head>
<body> 
    <div class="header">
        <h3>header</h3>
    </div>
    <div class="content">
        <div class="left">
            <h3>left</h3>
        </div>
        <div class="middle">
            <div class="one">
                <div>1/2</div>
                <div>1/2</div>
            </div>
        </div>
        <div class="right">
            <h3>right</h3>
        </div>

    </div>
<div class="footer">
    <h3>footer</h3>
</div>
 </body>
</html>

你把middle的浮动去掉就知道了，用了flex就尽量不要使用浮动了

把整个中间作为一个大盒子，将大盒子flex,再用百分比设置宽度，不要把左右那两块分开然后浮动