目录
前言
效果展示
编辑 代码
思路分析
前言
上一期我们学习了弹性布局，那么这一期我们用弹性布局来写一个小案例，下面看代码（上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客）
效果展示
代码
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="title">我最喜欢的动漫</div>
<div class="box">
<div class="first">
<img src="https://p1.ssl.qhimg.com/t0115ce3cbc4015ec6a.jpg" alt="" width="380px" height="580px">
</div>
<div class="second">
<img src="https://pic2.zhimg.com/v2-12739c6fd519e482491c474c5d4c555d_r.jpg?source=172ae18b" alt="" width="380px" height="280px">
</div>
<div class="third">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.5bb547e5904c73e0fd6797f9d84fd385?rik=ZArey%2blfkd7qZg&riu=http%3a%2f%2fimg1.gtimg.com%2fent%2fpics%2fhv1%2f220%2f19%2f1897%2f123357490.jpg&ehk=p%2bq0rmM2VU56Zk8J9UED%2fkOsy06RWh5fYYO%2fuqkvj8o%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="error" width="380px" height="280px">
</div>
<div class="forth">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6VInImvpRRAbGNLyA-O-7wHaEK?pid=ImgDet&rs=1" alt="000" width="380px" height="280px">
</div>
<div class="fifth">
<img src="https://pic1.zhimg.com/v2-eba5063f7938e90321291c220ab672b7_b.jpg" alt="" width="380px" height="280px">
</div>
</div>
</body>
</html>CSS代码：
.box{
margin: 0 auto;
display: flex;
height: 600px;
width: 1200px;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: column;
border: 2px solid yellow;
}
.title{
font-size: 40px;
color: blueviolet;
margin-left: 40%;
}
.first{
height: 580px;
width: 380px;
background-color: red;
background-image: url();
}
.second{
background-color: blue;
height: 280px;
width: 380px;
}
.third{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}
.forth{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}
.fifth{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}思路分析
首先我们去创建一个大盒子box，作为容器，里面放入5个项目（小盒子）。其中容器的主轴设置为y轴，然后设置为换行，还有对齐方式设置为所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔space-around，以上就可以实现每一个项目纵向排列不会出现超出边框的问题，然后就是依次放入小盒子在里面，最后就是放入图片了（图片均是网上资源可查阅）。
好了，以上就是今天的作品展示了，你们会了吗？我们下一期再见！
每日分享一张壁纸：
