【原创】display:flex布局大全
2024-09-01 03:31:29
全都是自己写的 希望大家可以点个赞 谢谢！
Html代码（没时间精简 请多包涵）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex布局大全</title>
<style>
body,html{
width: %;
height: %;
display: flex;
justify-content: space-between;
}
.fore{
width: 700px;
height: 277px;
margin: auto;
display: flex;
justify-content:space-around;
flex-wrap: wrap;
}
.row1,.row2,.row3{
width: 700px;
height: 95px;
display: flex;
justify-content: space-around;
}
.row1{
margin-top: 8px;
}
.father{
background-color: #;
height: 70px;
width: 70px;
border-radius: 8px ;
}
.son{
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.father2{
display: flex;
justify-content: center;
}
.father3{
display: flex;
justify-content: flex-end;
}
.father4{
display: flex;
justify-content: space-between;
}
.father5{
display: flex;
justify-content: flex-end;
}
.foreSom{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father6{
display: flex;
justify-content: space-between;
} .foreSon32{
display: flex;
flex-direction: column;
justify-content: center;
}
.foreSon33{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.father7{
display: flex;
justify-content: space-between;
}
.foreSon51{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.foreSon52{
display: flex;
flex-direction: column;
justify-content: center;
}
.foreSon53{
display: flex;
flex-direction: column;
justify-content: space-between;
} /* 第二行 */
.father2-{
display: flex;
justify-content: flex-start;
align-items: center;
}
.father2-{
display: flex;
justify-content: center;
align-items: center;
}
.father2-{
display: flex;
justify-content: flex-end;
align-items: center;
}
.father2-{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father2-{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.father2-{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foreSon2-{
display: flex;
flex-direction: column;
justify-content: space-between;
} .father2-{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foreSon2-{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father3-{
display: flex;
align-items: flex-end;
}
.father3-{
display: flex;
align-items: flex-end;
justify-content: center;
}
.father3-{
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.father3-{
display: flex;
}
.foreSon3--{
display: flex;
}
.foreSon3--{
align-self: center;
}
.father3-{
display: flex;
justify-content: space-between;
}
.foreSon3--{
align-self: center;
}
.father3-{
display: flex;
justify-content: space-between;
}
.foreSon3--{
align-self: flex-end;
}
.father3-{
display: flex;
flex-wrap: wrap;
}
.foreSon3--{
display: flex;
flex-basis: %;
justify-content: space-between;
}
.foreSon3--{
display: flex;
flex-basis: 70px;
justify-content: center;
}
.foreSon3--{
display: flex;
justify-content: space-between;
flex-basis: %;
} </style>
</head>
<body>
<div class="fore">
<div class="row1">
<div class="father">
<div class="son1 son"></div>
</div>
<div class="father father2">
<div class="son1 son"></div>
</div>
<div class="father father3">
<div class="son1 son"></div>
</div>
<div class="father father4">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father5">
<div class="foreSom">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
<div class="father father6">
<div class="foreSon31">
<div class="son1 son"></div>
</div>
<div class="foreSon32">
<div class="son1 son"></div>
</div>
<div class="foreSon33">
<div class="son1 son"></div>
</div>
</div>
<div class="father father7">
<div class="foreSon51">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon52">
<div class="son1 son"></div>
</div>
<div class="foreSon53">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div> </div>
<div class="row2">
<div class="father father2-1">
<div class="son1 son"></div>
</div>
<div class="father father2-2">
<div class="son1 son"></div>
</div>
<div class="father father2-3">
<div class="son1 son"></div>
</div>
<div class="father father2-4">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father2-5">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father2-6">
<div class="foreSon2-6">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon2-6">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
<div class="father father2-7">
<div class="foreSon2-7">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon2-7">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
</div>
<div class="row3">
<div class="father father3-1">
<div class="son1 son"></div>
</div>
<div class="father father3-2">
<div class="son1 son"></div>
</div>
<div class="father father3-3">
<div class="son1 son"></div>
</div>
<div class="father father3-4">
<div class="foreSon3-4-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-4-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-5">
<div class="foreSon3-5-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-5-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-6">
<div class="foreSon3-6-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-6-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-7">
<div class="foreSon3-7-1">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon3-7-2">
<div class="son1 son"></div>
</div>
<div class="foreSon3-7-3">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
</div>
</div> </body>
</html>
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
最新文章
- input输入框输入文字出现清空文字按钮
- Javascript - 数组去重复
- CyclicBarrier
- MongoDB Long/Int(长整型)的自增长主键 解决方案
- Linux Shell编程（26）——代码块重定向
- 【转】Android中设置TextView的颜色setTextColor
- 【转】深入理解Java内存模型（二）——重排序
- ES6躬行记（20）——类
- 用EF的三种方式（SqlServer数据库和Oracle数据库）
- Django---forms表单使用（2）
- # Java Queue系列之PriorityQueue
- ASCII，Unicode 和 UTF-8
- tp3.2多个或者并且语句语法
- osgi.net框架简介
- RabbitMQ消息交换模式简介
- Qt——布局管理器
- Jmeter入门--工具组成和线程组
- Alpha7
- JavaScript-关于在IE下JavaScript的Stack overflow at line错误可能的原因
- 【BZOJ2661】[BeiJing wc2012]连连看 最大费用流