已知整个盒子的高度为500px，上下布局，上盒子任意高度，下面盒子都可以自适应填满剩余部分，上下盒子都不知道高度
页面效果：
1671084387860_Trim
代码：
<!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>
.box{
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.top{
height: 20%;
background: pink;
}
.bottom{
background: skyblue;
flex-grow: 1;
}
</style>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
主要用到的是flex布局，父盒子flex布局，从上往下排列
flex-direction: column
flex-grow: 1
flex-direction：设置主轴的方向
属性值：row // 默认从左往右布局
row-reverse // 从右往左
column // 从上往下
column-reverse // 从下往上
flex-grow：用于设置或检索弹性盒子的扩展比率，这里默认比率是1
举个例子：相当于将整个div分了4份，第二份占二分之一，剩下两个占四分之一
<!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>
.box{
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.top{
background: skyblue;
flex-grow: 1; // 正常一个div占据1份
}
.top:nth-child(2){
background: pink;
flex-grow: 2; // 第二个div占2份
}
</style>
<body>
<div class="box">
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
</div>
</body>
</html>
如图：
将代码中的flex-direction设置为row，则是横向排列
