//弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.aaa{
width: 300px;
height: 300px;
display:flex;
justify-content: space-between;
flex-direction: column;
border:1px solid red;
padding:20px;
}
.a1{
width:60%;
margin:0 auto;
height:10%;
background :blue;
}
.a5{
height:60%;
width:100%;
display:flex;
justify-content: space-between;
flex-direction: row;
}
.a2{
width:10%;
height:100%;
background:pink;
}
.a3{
width:60%;
height:100%;
background: green;
}
</style>
<body>
<div class='aaa'>
<div class='a1 item'></div>
<div class='item a5'>
<div class='a2 item1' style="background-color: black;"></div>
<div class='a3 item1'></div>
<div class='a2 item1'></div>
</div>
<div class='a1 item' ></div>
</div>
</body>
</html>
弹性布局
最新推荐文章于 2022-06-12 15:13:18 发布