求最终 left、right 的宽度

Question

问题

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 300px;
    background: red;
  }
  .right {
    flex: 2 1 200px;
    background: blue;
  }
</style>

答案

 left: 333px; right: 266px; 这个问题的难点在于 flex 的缩写的顺序为多少

flex: 1 2 300px;
// 等同于
flex-grow: 1;
flex-shrink: 2;
flex-basis: 300px;