在今天的布局过程中,遇到了一个布局情景,这是一个常用的布局情景
遇到的情景如下图:
为了实现这个布局,使用了flex布局,详细的flex布局如下链接
为了方便自己以后的复习,实现了下图的模型
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局的常用情景</title>
<style>
.box{
width: 400px;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
background: #5e5e5e;
}
.item{
height: 150px;
width: 80px;
box-sizing: border-box;
border-radius: 32px;
font-size: 26px;
line-height: 64px;
text-align: center;
background: rgba(0,0,0,0.5);
align-items: center;
padding-top: 20px;
}
.item-img{
width: 50px;
height: 50px;
border-radius: 50%;
background: #67b168;
margin: 0 auto;
}
.item-title{
padding-top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<div class="item-img"></div>
<div class="item-title">
标题一
</div>
</div>
<div class="item">
<div class="item-img"></div>
<div class="item-title">
标题二
</div>
</div>
<div class="item">
<div class="item-img"></div>
<div class="item-title">
标题三
</div>
</div>
<div class="item">
<div class="item-img"></div>
<div class="item-title">
标题四
</div>
</div>
</div>
</body>
</html>
仅供方便学习使用