弹性布局子元素布局案例实战
要求:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a572b440d1d3151fadfd27d4ee53223b.png)
- 实现代码
<body>
<div class="main">
<div class="box">
<div class="box-centent"></div>
<div class="box-centent"></div>
<div class="box-centent"></div>
<div class="box-centent"></div>
</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<style>
* {
margin: 0;
padding: 0;
color: aliceblue;
}
.main {
width: auto;
height: 700px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.main .box {
margin-top: 200px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
background-color: #6096e6;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.main .box-centent {
width: 60px;
height: 30px;
background-color: red;
}
</style>
</body>