Flexbox使一个项目比其他项目大4倍

Question

我正在看这张Flexbox备忘单：

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

这里有一个例子：

我想让bigitem比小项目大4倍，而不是2倍大，但我无法弄清楚如何做到这一点？！我尝试用4代替2而不是没有用。

Answer 1

  

我想让bigitem比小项目大4倍，而不是2倍大，但我无法弄清楚如何做到这一点？！

请勿使用flex-grow执行此任务。使用flex-basis。

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

.smallitem { flex: 0 0 20%; }

flex-grow属性实际上并未调整弹性项目的大小。它在容器中分配空闲空间。

一个项目flex: 4 0 0和另一个项目flex: 1 0 0，意味着以下内容：

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

因为你只处理自由空间，所以4对1 flex-grow并不一定意味着一个项目将是另一个项目的4倍。这意味着一个项目的可用空间将比另一个项目多4倍。

这也意味着flex-grow值8对2,16对4,20对5等等将产生完全相同的结果，因为比例是相同的。

请点击此处了解更多详情：

• flex-grow not sizing flex items as expected
• Make div fill remaining *horizontal* space in flexbox