CSS的flex属性计算

起因：计算左右两个节点的宽度

<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 500px;
    background: red;
  }
  .right {
    flex: 2 1 400px;
    background: blue;
  }
</style>

flex的第一个值：flex-grow，默认是0，就是不占用多出来的空间。所有子节点宽度小于父节点宽度时生效，按比例分摊剩余空间

flex的第二个值：flex-shrink，默认是1（坑skr人），所有子节点的宽度求和超过父节点宽度时生效。

flex的第三个值：flex-basis，如果声明，则会覆盖节点的width属性，flex-basis的优先级更高。如果所有子节点的宽度求和超过父节点宽度，则按照声明的宽度比例缩小填满父节点；但是宽度小于的时候，却不会自动填满

============================================

解释下这个题：

简单来说就是按比例分摊剩余空间，那剩余空间是个啥呢？

再简单解释下就是父节点主轴上的宽度 减去 所有字节点的宽度（可正可负）

问题变的好像容易了很多

父节点宽度600，子节点一共多出来300，按照flex-shrink 是2 ： 1，那结果不应该是左右各300平分吗？

太片面了，真这么简单还出啥题？

首先我们很容易就能发现上面算法的问题：上面算法默认左右两边宽度一致，但是实际不是这样，所以我们加上宽度对压缩率的影响

X1：左边压缩率，X2：右边压缩率

X1 = 2X2
300 = 500 * X1 + 400 * X2（为啥是300不是600，因为是针对压缩空间啊）

求解方程，X1 = 3/7，X2 = 3/14（为啥加起来不是1呢？因为是针对字节点自己的宽度压缩啊）

所以左边的宽度：500 * （1 - X1） = 285.7142857142857

所以右边的宽度：400 * （1 - X2） = 314.2857142857143

求和刚好是600