巧用flex实现页面布局分隔

image.png

.all-box{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-box{
  height: 800rpx;
  width: 504rpx;
  display: flex;
  flex-direction: column;
}
.bottom-box{
  width: 100%;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

① 设置 flex:1 为将整个all-box中给top-box的高度后 将剩下的高度给bottom-box
② 如果top-box与bottom-box同时设置为 flex:1，则平分高度
③ 如果top-box设置为 flex:1， bottom-box设置为 flex:2 ， 则表示总共有三份，top-box占一份，bottom-box占两份