了解值小于1时的flex-shrink

Question

假设我有一个只有两个子容器的弹性容器，并且我想让它们收缩，所以我给它们都指定了一个非零flex-shrink值。据我了解，重要的是值之间的比率。因此，将值设置为：

• 第一个孩子 4 个，第二个孩子 1 个
• 第一个孩子 100，第二个孩子 25
• 第一个孩子 1，第二个孩子 0.25

都应该产生相同的行为。它确实如此……直到其中一个孩子按下了它min-width。在第三种情况下，第二个孩子溢出了容器。我想说这是一个错误，但它在 Chrome、Safari 和 Firefox 中都是一致的。

这是一个游乐场，这是显示“错误”的屏幕截图，我在其中添加了每个孩子的尺寸。每个子width属性设置为 200px 和min-width100px。第一种情况下容器的宽度为 300px，第二种情况为 220px。

body {
  background: black;
  color: white;
}

.container {
  border: deeppink 2px solid;
  display: flex;
  height: 50px;
}

.box {
  width: 200px;
  min-width: 100px;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

<h2>First case, both boxes have pixels to give up</h2>
<h3>Flex shrink 4 and 1</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 4;"></div>
  <div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>Flex shrink 100 and 25</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 100;"></div>
  <div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>Flex shrink 1 and 0.25</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 1;"></div>
  <div class="blue box" style="flex-shrink: 0.25;"></div>
</div>

<h2>Second case, first box is at its minimun</h2>
<h3>Flex shrink 4 and 1</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 4;"></div>
  <div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>Flex shrink 100 and 25</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 100;"></div>
  <div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>Flex shrink 1 and 0.25: overflow!</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 1;"></div>
  <div class="blue box" style="flex-shrink: 0.25;"></div>
</div>

谁能解释一下发生了什么事吗？

Answer 1

我将尝试用简单的词语来总结正在发生的事情，因为规范中的词语简直就是噩梦。

\n

你所面对的事情与两件事有关。第一个是“修复最小/最大违规”。第二个是因子总和flex-shrink小于 1。这部分详细介绍了所有内容：https ://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths

\n

这是一步一步发生的事情。

\n

首先，我们首先找到元素的大小，注意我们有溢出和负的可用空间。200px + 200px > 220px可用空间为180px。

\n

我们计算每个项目的“缩放弹性收缩系数”，然后我们得到比率 0.8 = (1 * 200)/(1 * 200 + .25*200)和0.2 = (.25 * 200)/(1 * 200 + .25*200)

\n

第一项将缩小.8*180px = 144px和 第二项.2*180px = 36px将给我们新的宽度等于56px和164px

\n

之后，我们将点击“修复最小/最大违规”，因为第一个项目比它小min-width（第二个项目很好）。所以我们把它夹住100px并冷冻起来。所有的技巧都在这里，我们不再触及第一项，我们只考虑第二项再次运行算法。

\n

因此，我们的新配置是一个元素，其200px宽度和收缩因子等于 ，0.25内部空间等于220px - 100px = 120px。这里强调第二件事，收缩因子的总和（我们只有一个）小于 1，因此我们的项目不会收缩所有负可用空间。

\n

负自由空间等于，200px - 120px = 80px但它不是我们会考虑的，因为如果我们遵循规范，我们可以读到：

\n

\n

按照上面的初始可用空间计算剩余可用空间。如果未冻结的弹性项目\xe2\x80\x99弹性因子的总和小于 1，则将初始可用空间乘以该总和。如果该值的大小小于剩余可用空间的大小，则将其用作剩余可用空间。

\n

\n

初始可用空间为，180px因此我们将该值乘以.25得到45px。该值的大小小于新的可用空间（剩余可用空间等于80px），因此我们使用它。

\n

现在你知道故事的结局了。我们有一个项目需要缩小45px，80px所以它的最终宽度是155px，并且我们有一个溢出（155px + 100px > 220px）

\n

0这种行为背后的逻辑是在和之间具有一种连续函数1。0意味着不收缩，1意味着完全收缩，超过1仍然是完全收缩，但在两者之间我们有部分收缩。

\n

这是一个简化的例子以供理解。

\n

\r\n

\r\n

body {\n  background: black;\n}\n\n.container {\n  border: deeppink 2px solid;\n  display: flex;\n  width: 200px;\n  height: 50px;\n  margin: 10px 0;\n}\n\n.box {\n  width: 300px;\n  background: green;\n}

\r\n

<div class="container">\n  <div class="box" style="flex-shrink: 0;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 0.2;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 0.4;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 0.6;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 0.8;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 1;"></div>\n</div>\n<div class="container">\n  <div class="box" style="flex-shrink: 10;"></div>\n</div>

\r\n

\r\n

\r\n

\n

0正如您所看到的，当我们增加值直到达到时，项目会减慢收缩1。

\n

在其他情况下，您不会遇到任何溢出问题，因为即使在冻结某些项目之后，收缩因子的总和也将等于或大于，1因此我们将始终使用新计算的可用空间

\n