flex布局实现上下固定，中间自适应

 .father {
    width: 200px;
    height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: cyan;
  }

  .son1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: brown;
  }
  .son2 {
    flex:1;
    background-color: burlywood;
  }
  .son3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: chartreuse;
  }

实现的主要方法就是通过给父盒子添加flex布局，并掉转主轴方向，上下定位固定好位置，中间flex：1，进行自适应，其实就是竖版的三栏布局，可以看卡我之前写得两栏布局和三栏布局