Question

让我们说我有一个简单的灵活容器，其中包含两个弹性项目，其中的灵活项目是＆＃39;尺寸超过容器尺寸 - 将使用flex-shrink。如此：

＆＃13;

.container {
  width: 600px;
  outline: 5px solid;
  display: flex;
}
section {
  flex: 0 1 600px;
  background: salmon;
}
aside {
  flex: 0 1 200px;
  background: aqua;
}

＆＃13;

<div class="container">
  <section>
    <h2>Main content here</h2>
  </section>
  <aside>
    <h2>Some side content</h2>
  </aside>
</div>

＆＃13;

Codepen demo

在上面的示例中：容器是600px，部分flex-item的弹性基础为600px，而旁边的弹性基础为200px - 所以负空间为200px。

因此两个flex项目具有相同的flex-shrink因子1 - 我预计两个flex项目将缩小100px，section的宽度为600px - 100px = 500px和{{1获得200px - 100px = 100px

但结果实际上是aside缩小了150px到450px而section缩小了50px到150px

然后我看了the spec，我发现了这个：

注意：弹性收缩因子乘以弹性基本尺寸分配负空间。这会分配负空间物品能够缩小的比例，例如，一个在较大的项目出现之前，小项目不会缩小到零显着减少。

所以现在我明白，在Flex项目上计算flex-shrink时，不仅要考虑flex缩减因子，还要考虑flex基本大小（这里，由flex-basis属性定义）

问题在于我似乎无法计算flex-shrink。

所以继续上面的例子：说我将aside的缩减系数更改为2 ...

＆＃13;

section

＆＃13;

.container {
  width: 600px;
  outline: 5px solid;
  display: flex;
}
section {
  flex: 0 2 600px;
  background: salmon;
}
aside {
  flex: 0 1 200px;
  background: aqua;
}

＆＃13;

Codepen demo #2

...结果是<div class="container"> <section> <h2>Main content here</h2> </section> <aside> <h2>Some side content</h2> </aside> </div>的宽度为428px，section的宽度为121px

有人可以解释如何计算吗？

Answer 1

忽略了很多细节，算法是这样的

let sumScaledShrinkFactors = 0,
    remainingFreeSpace = flexContainer.innerMainSize;
for (let item of flexItems) {
  remainingFreeSpace -= item.outerFlexBasis;
  item.scaledShrinkFactor = item.innerFlexBasis * item.flexShrinkFactor;
  sumScaledShrinkFactors += item.scaledShrinkFactor;
}
for (let item of flexItems) {
  let ratio = item.scaledShrinkFactor / sumScaledShrinkFactors;
  item.innerWidth = item.innerFlexBasis + ratio * remainingFreeSpace;
}

所以公式就像

flexBasis * (1 + shrinkFactor / sumScaledShrinkFactors * remainingFreeSpace)

第一种情况

1*600px + 1*200px ─┐               width 
                   │              ───────
600px * (1 + 1 / 800px * -200px) = 450px 
200px * (1 + 1 / 800px * -200px) = 150px 
                            │     ───────
600px - (600px + 200px) ────┘      600px

第二个案例

2*600px + 1*200px ──┐               width 
                    │              ───────
600px * (1 + 2 / 1400px * -200px) ≈ 429px 
200px * (1 + 1 / 1400px * -200px) ≈ 171px 
                             │     ───────
600px - (600px + 200px) ─────┘      600px

如何在弹性项目具有不同的弹性基础时计算弹性收缩

1 个答案: