第 156 题：求最终 left、right 的宽度（变形）

[yygmind]

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

注：此题和 155 题 left、right 样式有些不同

[jxmlearner]

剩余的空间：600 - (300 + 200) = 100。
子元素的 flex-grow 的值分别为 1，2， 剩余空间用3等分来分
100 / 3 = 33.3333333
所以 left = 300 + 1 * 33.33 = 333.33
right = 200 + 2 * 33.33 = 266.67

[waka3]

flex-grow和flex-shrink的计算方式还不一样 O(∩_∩)O

[luxinru]

flex-grow和flex-shrink的计算方式还不一样 O(∩_∩)O

是的 我参照shrink计算的值和实际代码跑出来的不一样 上面那位兄弟是对的

[lqzo]

flex-grow 指定剩余空间以什么样的比例（增长系数 / 增长系数总和）分配给元素
子元素的 flex-grow 的值分别为 1, 2
剩余空间：600 - 300 - 200 = 100
两个元素的宽度分别为
300 + 100 * 1 / 3 = 333.33px
200 + 100 * 2 / 3 = 266.67px

[WangYingYaTou]

精彩精彩，学到了

[zrx1118]

我觉得考flex-shrink更有意思一些

[waka3]

flex-grow和flex-shrink的计算方式还不一样 O(∩_∩)O

是的 我参照shrink计算的值和实际代码跑出来的不一样 上面那位兄弟是对的

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax 可以参考这个，我昨天看了一遍，今天又看了一遍。 哈哈

[hexuan-aurora]

主容器宽度大于所有子项的宽度和，有剩余空间，因而按照子项的 flex-grow 进行分配：

• 剩余空间：600 - (300 + 200) = 100
• 子项 Left 和 Right 对应的 flex-grow 为 1、2，因此需要将剩余空间进行按 3 等分进行划分
• 子项 Left 扩展的宽度为 (1 ÷ 3) × 100 ≈ 33.33，扩展后的宽度为 300 + 33.33 ≈ 333.33
• 子项 Right 扩展的宽度为 (2 ÷ 3) × 100 ≈ 66.67，扩展后的宽度为 200 + 66.67 ≈ 266.67

[JackySoft]

如果容器宽度是400，该怎么计算？

[waka3]

如果容器宽度是400，该怎么计算？

容器宽度400是子元素总宽度超出总宽度，这时候是缩放适应，flex-shrink。你可以去看一下155题

[listentolife]

因为父容器的宽度是600px，大于left跟right容器的宽度和，余100px，
没有margin跟padding影响，然后flex-grow的比是1:2，
所以left会多100 / 3 * 1 = 33.3的宽度，right会多100 / 3 * 2 = 66.7
最终left宽300 + 33.3 = 333.3，right宽200 + 66.7 = 266.7

[ron0115]

由于未撑满， 所以这时候只需要考虑flex-grow的属性就行了吗， 设置了flex-shrink的值都可以忽略？