原文：求最终 left、right 的宽度（变形） - 每天一个JavaScript小知识@Js中文网 · 码农进阶题库

原文地址：https://www.javascriptc.com/interview-tips/zh_cn/more/left-right/

题目描述：

手动求最终 left、right 的宽度（变形）

<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>

看解析之前不妨自己思考怎么解，尽可能想到多的解法

  • 解析：

  • No.1:

1、剩余的空间：600 - (300 + 200) = 100。
2、子元素的 flex-grow 的值分别为 1，2， 剩余空间用3等分来分
3、100 / 3 = 33.3333333
4、所以 left = 300 + 1 * 33.33 = 333.33
5、right = 200 + 2 * 33.33 = 266.67
  • No.2：
1、flex-grow 指定剩余空间以什么样的比例（增长系数 / 增长系数总和）分配给元素
2、子 元素的 flex-grow 的值分别为 1, 2
3、剩余空间：600 - 300 - 200 = 100
4、两个元素的宽度分别为
5、300 + 100 * 1 / 3 = 333.33px
6、200 + 100 * 2 / 3 = 266.67px

怎么样，你是否想到了更多更好的方法呢，可以一起讨论学习哦

扩展阅读：