flex实现等分布局和两边固定中间自适应

 等分布局：

<div class="main">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>

.main {
      height: 300px;
      width:100%;
      display:flex;
      .left {
        flex-grow: 1;
        // flex-shrink: 0;
        background:blue;
      }
      .right {
        flex-grow: 1;
        // flex-shrink: 0;
        background:green;
      }
      .middle {
        flex-grow: 1;
        // flex-shrink: 1;
      }
    }

中间自适应两边固定效果：

.main {
      height: 300px;
      width:100%;
      display:flex;
      .left {
        // flex-grow: 1;
        flex-shrink: 0;
        width: 200px;
        background:blue;
      }
      .right {
        // flex-grow: 1;
        flex-shrink: 0;
        width: 200px;
        background:green;
      }
      .middle {
        // flex-grow: 1;
        width: 100%;
        flex-shrink: 1;
      }
    }

主要属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

参考： Flex 布局教程：语法篇