html&CSS-----弹性布局案例展示

目录

前言

效果展示

​编辑 代码

思路分析

---

前言

        上一期我们学习了弹性布局，那么这一期我们用弹性布局来写一个小案例，下面看代码（上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客）

效果展示

 代码

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，以上就可以实现每一个项目纵向排列不会出现超出边框的问题，然后就是依次放入小盒子在里面，最后就是放入图片了（图片均是网上资源可查阅）。

 好了，以上就是今天的作品展示了，你们会了吗？我们下一期再见！

每日分享一张壁纸：