Flex布局实现左右固定中间部分自适应

工作之余把 flex 常用的几个功能都实现了一遍，巩固下所学知识与记忆，还是直接上代码，哈哈哈。

<div class="parent3">
    <div class="left">
      left -- 固定
    </div>
    <div class="middle">
      中间布局自适应
    </div>
    <div class="right">
      right -- 固定
    </div>
</div>

<style>
 .parent3 {
    height: 300px;
    display: flex;
  }

  .left {
    width: 20%;
    background: #fafb9a;
  }

  .middle {
    background: #adc599;
    flex: 1;
    /* flex-grow: 1; */
  }

  .right {
    width: 30%;
    background: #eee;
  }
</style>