实用的垂直弹性布局案例

布局需求：中间登录部分固定，上下盒子弹性。

放一张公司的ui设计稿(好的ui小哥哥，让我不用看渲染效果，徒手让我写完布局！爱他❤️)

image.png

小前端眼里的布局：

image.png

上代码

    .flex_box {
      display: flex;
      flex-flow: column;
      width: 100%;
      height: 100%;
      min-height: 520px;
      overflow: hidden;
      .flex_height_top {
        flex: 1;
        min-height: 60px;
        max-height: 140px;
      }
      .flex_height_bottom {
        flex: 1;
        min-height: 60px;
        max-height: 427px;
      }
      .login_content {
        height: 400px;
        display: flex;
        justify-content: center;
      }
}