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

Question

我正在学习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' 的宽度为：

330px
110px
150px
0（flex-grow无法计算）

提前致谢。

Answer 1

您将有 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>

Answer 2

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

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

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

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

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

首先，我们将弹性项目的弹性增长因子相加：article 的 flex-grow: 2 和 aside 的 flex-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>

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

How is element width calculated with flex-grow?

css

flexbox

web-frontend