Flexbox make one item 4x bigger than other items

Question

I am looking at this Flexbox cheat sheet:

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

Here we have an example:

I want to make the bigitem 4x bigger than the smallitem, not 2x as big, but I cannot figure out how to do that?! I tried substituting 4 for 2 and no that didn't work.

Answer 1

I want to make the bigitem 4x bigger than the smallitem, not 2x as big, but I cannot figure out how to do that?!

Don't use flex-grow for this task. Use flex-basis.

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

.smallitem { flex: 0 0 20%; }

The flex-grow property does not actually size flex items. It distributes free space in the container.

So flex: 4 0 0 on one item, and flex: 1 0 0 on the other item, means the following:

• Determine the amount of free space on the main axis line (the row, in this case)
• Divide that amount by five.
• One item consumes four parts.
• The other item consumes one part.

Because you're dealing only with free space, the 4 vs 1 flex-grow doesn't necessarily mean one item will be 4x the size of the other. It means that one item will consume 4x more free space than the other.

It also means that flex-grow values of 8 vs 2, 16 vs 4, 20 vs 5, etc., will yield the exact same result, because the proportions are the same.

See here for more details:

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