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

Question

我在看这个Flexbox的小抄：

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

我们这里有一个例子：

我想要做的bigitem比小项大4倍，不是2x大，但我不知道该怎么做？！我试着用2代替4，没有发现不起作用。

Answer 1

我想让小项目比小项目大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项目的大小。它在容器中分配可用空间。

所以flex: 4 0 0上一个项目，并且flex: 1 0 0对其他项目，指的是下述：

• 确定在主轴线的自由空间量（行，在这种情况下）
• 鸿沟那五倍。
• 一个项目消耗四个部分。
• 其他项目消耗一部分。

由于您只处理可用空间，所以4 vs 1 flex-grow并不一定意味着一个项目将是另一个项目的4倍大小。这意味着一个项目将消耗比另一个项目多4倍的可用空间。

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

在这里看到更多的细节：

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