Flexbox 使一件物品比其他物品大 4 倍

我正在看这个 Flexbox 备忘单：

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#wrapcolumn

这里我们有一个例子：

我想让大项目比小项目大 4 倍，而不是大 2 倍，但我不知道该怎么做？！我尝试用 4 代替 2，但没有成功。

我想让大项目比小项目大 4 倍，而不是大 2 倍，但我不知道该怎么做？！

不要使用flex-grow为了这个任务。使用flex-basis.

.bigitem { flex: 0 0 80%; } /* flex-grow, flex-shrink, flex-basis */

.smallitem { flex: 0 0 20%; }

The flex-grow属性实际上并不调整弹性项目的大小。它分配容器中的可用空间。

So flex: 4 0 0在一件物品上，以及flex: 1 0 0在另一项上，含义如下：

• 确定主轴线（在本例中为行）上的可用空间量
• 将该金额除以五。
• 一件物品消耗四个部分。
• 另一项消耗一部分。

因为您只处理自由空间，所以 4 vs 1flex-grow并不一定意味着一件物品的尺寸是另一件物品的 4 倍。这意味着一项所消耗的可用空间是另一项的 4 倍。

这也意味着flex-grow8 vs 2、16 vs 4、20 vs 5 等值将产生完全相同的结果，因为比例相同。

请参阅此处了解更多详细信息：

• flex-grow 未按预期调整弹性项目的大小
• 让 div 填充 Flexbox 中剩余的*水平*空间