flex两列布局 以及三列布局

flex两列布局

左固定右适应：

<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
  </div>

 .a {
      display: flex;
      height: 400px;
    }

    .a1 {
      width: 400px;
      height: 400px;
      background-color: red;
    }

    .a2 {
      flex: 1;
      background-color: green;
    }

flex三列布局

左右固定 中间自适应：

<div class="b">
    <!--圣杯布局-->
    <div class='b-left'></div>
    <div class='b-center'></div>
    <div class='b-right'></div>
  </div>

.b {
      display: flex;
      height: 200px
    }

    .b-left {
      order: 2;
      width: 100px;
      background: pink;
    }

    .b-center {
      order: 1;
      flex: 1;
      background: purple;
    }

    .b-right {
      order: 0;
      width: 100px;
      background: palevioletred;
    }

flex：1
等同于 flex-grow:1 放大一倍占满空间