flex实现三列布局

flex实现三列布局

    .container{
      height: 500px;
      display: flex;
      background-color: wheat;
    }
    .one{
      /* flex: 0 1 200px; */
      background-color: violet;
    }
    .two{
      /* 将剩余空间分配给two，独占一份 */
      flex: 1;
      background-color: yellow;
    }
    .three{
      /* flex: 0 1 200px; */
      background-color: tomato;
    }
    .one,.three{
      width: 200px;
    }

    <div class="container">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>