flex-grow 不易理解，难道不是吗?

当我刚接触 flex-grow 时，为了探寻它的工作原理，做了一个 简单的例子 。

我以为理解的挺透彻了，但是当我把它应用到同事的网站上时，效果跟我想象的完全不同。无论怎么改，布局都无法像我的demo那样展示。这时我才意识到，我并没有完全掌握 flex-grow 。

flex-grow 为何不正常

在我深入剖析 flex-grow 的功能之前，我想解释一下我起初犯了什么错。

我认为所有 flex 元素的 flex-grow 如果设置为 1 ，它们将一样宽。如果某一项的 flex-grow 设置为 2 ，它将是其它元素的二倍宽。

一切听起来顺理成章。我 上面的例子 貌似也印证了这点。父元素是900px宽， flex-grow: 2 的 section 元素计算后是600px宽， flex-grow: 1 的 aside 元素计算后是300px宽。

如你所见，它在这个例子中展现的近乎完美，可是在真实的例子中却不尽人意，即使我们用了完全相同的 CSS。事实证明，问题不在 CSS，而在于内容（或者说缺乏内容）。我的测试用例只用了两个空元素，无法展示这个属性最重要的细节。

flex-grow 到底如何工作

啰嗦了半天，我终于要解释 flex-grow 没有尽如人意的原因了。

为了阐明原因，我又搞了个 栗子 ，所有的设置跟 第一个栗子 完全一致，只不过 section 和 aside 元素不再是空的。看吧，两个元素的比例不再是 2 : 1，flex-grow 为 1 的元素的确比 flex-grow 为 2 的元素宽不少呐。

解析

如果给父元素设置了 display: flex; ，子元素仅仅是水平排列，没有其它效果了。如果没有足够的空间，它们会收缩一些尺寸。另一方面，如果有足够的空间，它们也不会扩展，因为 Flexbox 希望我们自己定义扩展多少。 flex-grow 恰恰用来定义剩余空间如何分配，每一项分享多大宽度。

换言之：

https://drafts.csswg.org/css-flexbox/#flexibility

证明

如果我们可视化一把，概念就很清晰明了了。

首先，我们给父元素设置了 display: flex ，然后它的子元素成了 flex 元素，一个挨一个的横向排列。

下一步，我们要决定每个元素能获得多少剩余空间。先前的例子中，第一个元素获得了 2/3 的剩余空间（ flex-grow: 2 ），第二个元素获得了 1/3 的剩余空间（ flex-grow: 1 ）。想知道 flex-grow 总共的值是多少，看看剩余空间被分成了几份吧。

最终我们得出了可分配的块数，根据 flex-grow 的值，每个元素可以获得适当的块数。

计算结果

理论和视觉展示都不错，让我们为 上面例子 做点算术吧。

我们需要4组数字：父容器宽度， section 和 aside 元素的初始宽度，以及 flex-grow 的总值。

1. 首先计算剩余空间

父容器宽减去每一个子元素的初始宽度。

900 - 99 - 623 = 178

178 / 3 = 59.33

99 + (2 * 59.33) = 217.66 (≈218px)

623 + (1 * 59.33) = 682.33 (≈682px)

900 - 0 - 0 = 900

900 / 3 = 300

0 + (2 * 300) = 600    0 + (1 * 300) = 300

900 - 400 - 200 = 300

300 / 3 = 100

400 + (2 * 100) = 600    200 + (1 * 100) = 300

flex: 2 1 auto;  /* (<flex-grow> | <flex-shrink> | <flex-basis>) */