Advanced-Frontend/Daily-Interview-Question

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

yygmind opened this issue · 17 comments

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

剩余的空间：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

  • 👍58
  • ❤️4
waka3 commented

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

  • 😄3
  • 👀3
luxinru commented

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

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

lqzo commented

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

WangYingYaTou commented

精彩精彩，学到了

zrx1118 commented

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

  • 👍5
waka3 commented

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 commented

主容器宽度大于所有子项的宽度和，有剩余空间，因而按照子项的 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
  • 👍2
JackySoft commented

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

waka3 commented

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

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

listentolife commented

因为父容器的宽度是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 commented

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

qinro commented

flex属性是flex-gorw、flex-shrink、flex-basic

    1. flex-grow: 指定如果有多余的宽度，项目是否可以扩大
    2. flex-shrink：指定如果宽度不足，项目是否可以缩小
    3. flex-basic: 项目的初始宽度

    1. 容器的总宽度是600px,高度为300px. 宽度变化，高度无设置，为统一高度 300px
    2. left: 1 2 300px; right: 2 1 200px;
    3. left初始宽度为300px，right初始宽度为200px, 有多余宽度600-300-200=100px，应扩大；
    4. 100px剩余空间中，left占比例1，right占比例2，即100/（1+2）=33.33px。 left分配为33.33px,right分配为66.67px
    5. left:w=300+33.33=333.33px; right:w=200+66.67=266.67px
slogeor commented

剩余空间分配公式

分配到的剩余空间宽度 = 剩余空间宽度 * (自身元素的 flex-grow 值 / 所有元素的 flex-grow 值的和)

解题思路
flex: 1 2 300px;
// 等价于
flex-grow: 1;
flex-shrink: 2;
flex-basis: 300;

flex: 2 1 200px;
// 等价于
flex-grow: 2;
flex-shrink: 1;
flex-basis: 200;

因为 300 + 200 < 600，故需要使用 剩余空间分配公式。

  • left 的宽度 = 300 + 100 * (1 / (1 + 2)) = 333.333
  • right 的宽度 = 200 + 100 * (2 / (1 + 2)) = 266.667
  • 👍2
tryingpzm commented

上一个题通过常识使用了这个题的方法，完美挂掉；
这一个题学到了，使用的上一个题的方法，再次挂掉；

lxinr commented 
flex: <flex-grow> <flex-shrink> <flex-basis>
父容器宽度

设置了flex-basis即类似于设置了width
此时父容器宽度600px大于子容器总宽度300px + 200px，因此适用剩余空间概念，此时根据flex-grow的值来计算，flex-shrink的值无效
剩余空间W = 600 - 300 - 200 = 100
left宽度 = 300 + (1/(1+2)) * W = 300 + 33.333 = 333.333px
right宽度 = 200 + (2/(1+2)) * W = 200 + 66.666 = 266.666px

kklwoe commented

flex-grow和flex-shrink这两个的算法有点区别，grow算法还是直接些