如何使用 flex-grow 计算元素宽度?

How is element width calculated with flex-grow?

我正在学习CSS,有个问题想请你帮我解决。

您有一个元素 'div',其中有两个子元素,'article' 和 'aside'。

假设父元素 'div' 的宽度为 900px,'article' 元素的宽度为 120px,'aside' 元素的宽度为 450px

CSS 看起来如下:

    div {
        width: 900px;
        display: flex;
    }
    
    article {
         flex-grow: 2;
         width: 120px;
    }
    
    aside {
        flex-grow: 1;
        width: 450px;
    }

每个 'flex-grow: 1' 的宽度为:

  1. 330px
  2. 110px
  3. 150px
  4. 0(flex-grow无法计算)

提前致谢。

您将有 330px 个免费 space (900 - 450 - 120)。第一个元素将比第二个元素增长两倍。总的增长因子是 3 (2+1) 所以第一个需要 2/3*330 = 220px 第二个需要 1/3*330px = 110px 我们将以

结束
article = 120px + 220px = 340px
aside   = 450px + 110px = 560px

检查以下代码以验证值:

div {
  width: 900px;
  display: flex;
  height: 50px;
}

article {
  flex-grow: 2;
  width: 120px;
  background: red;
}

aside {
  flex-grow: 1;
  width: 450px;
  background: green;
}
<div>
  <article></article>
  <aside></aside>
</div>

具有 flex-grow 因子 1aside 元素将在您的方案中增长 110px

以下是 Flexbox 布局算法解决 flex 项目灵活长度的粗略步骤:

确定弹性项目是应该增大还是缩小

  • 我们的 flex 容器 900px
  • 我们的 flex 项目的宽度总和是 120px + 450px = 570px
  • 还有剩余 space(900px - 570px = 330px),所以我们的项目应该增长

将剩余的免费 space 分配给 flex 项目

  • 首先,我们将弹性项目的弹性增长因子相加:articleflex-grow: 2asideflex-grow: 1 总和为 3
  • 现在,我们使用以下公式将剩余的 space 按比例分配给弹性项目:flex item grow factor / sum of all flex item grow factors * remaining free space
    • aside 得到一个额外的 110px,因为 1/3 * 330px = 110px
    • article 得到一个额外的 220px,因为 2/3 * 330px = 220px

div {
  width: 900px;
  display: flex;
}

article {
  flex-grow: 2;
  width: 120px;
  background-color: tomato;
}

aside {
  flex-grow: 1;
  width: 450px;
  background-color: royalblue;
}

body {
  color: white;
  font-size: 24px;
  line-height: 3;
  text-align: center;
}
<div>
  <article>
    article grows by 220px
  </article>
  <aside>
    aside grows by 110px
  </aside>
</div>