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

发布时间：2020-12-15 01:44:23 所属栏目：百科来源：网络整理

导读：假设我有一个简单的Flex容器,其中包含2个flex项目,其中flex项目的大小超过容器大小 – 将使用flex-shrink.如下所示： .container { width: 600px; outline: 5px solid; display: flex;}section { flex: 0 1 600px; background: salmon;}aside { flex: 0 1 20

假设我有一个简单的Flex容器,其中包含2个flex项目,其中flex项目的大小超过容器大小 – 将使用flex-shrink.如下所示：

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

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

Codepen demo

在上面的例子中：容器是600px,部分flex-item的flex基础是600px,而旁边的flex-basis是200px – 所以负空间是200px.

因此,两个flex项目具有相同的flex-shrink因子1 – 我预计两个flex项目将缩小100px,其中部分的宽度为600px – 100px = 500px,而另外两个得到200px – 100px = 100px

但实际结果是该部分缩小了150px至450px,而旁边则缩小了50px至150px

那么我看了the spec,我发现了这个：

Note: The flex shrink factor is multiplied by the flex base size when
distributing negative space. This distributes negative space in
proportion to how much the item is able to shrink,so that e.g. a
small item won’t shrink to zero before a larger item has been
noticeably reduced.

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

问题是我似乎无法计算flex-shrink.

所以只是继续上面的例子：说我将该部分的收缩系数改为2 ……

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

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

Codepen demo #2

…结果是该部分的宽度为428px,并且旁边的宽度为121px

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!