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