弹性盒子
2022-11-09 本文已影响0人
taony
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
display:flex;
background-color: #f5f5f5 ;
flex-flow: row nowrap;
align-items: flex-start;
}
.left,.right{
height: 100vh ;
}
.left{
background-color: blue;
width: 100%;
}
.right{
width:400px;
background-color: aqua;
}
.left-content{
display: flex;
background-color: blueviolet;
height: 100vh;
flex-flow: column nowrap;
}
.left-1,.left-2{
margin: 20px;
height: 100vh;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="left-content">
<div class="left-1">
left-1
</div>
<div class="left-2">
left-2
</div>
</div>
</div>
<div class="right">
</div>
</div>
</body>
</html>
