Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Two Column Layout with Flexbox

Posted by Manav Misra
Manav Misra
11,778 Points

What is the difference between flex and flex-grow?

I believe that giving .primary a value of flex-grow: 2 versus just flex: 2 like Guil Hernandez did, achieves the same effect, right?

Am I missing something, or is this just a personal preference thing?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

They're exactly the same thing in this case

Flex, is a shorthand for flex-grow, flex-shrink, and flex basis. Flex-shrink and flex-basis are optional, and default to 1 auto.

So flex: 2 is the exact same as saying flex-grow: 2; flex-shrink: 1; flex-basis: auto

Generally, you would want to use the shorthand, most devs would. But it accomplishes the same.

This is my favorite flexbox reference guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Miroslav Kovac
Miroslav Kovac
11,454 Points
Miroslav Kovac
Miroslav Kovac
11,454 Points

Only for correction, Default for flex-basis is 'auto' not '1'.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Thank you for catching that Miroslav! I have updated my answer for correctness.

Yvette Pascacsio
Yvette Pascacsio
5,522 Points
Yvette Pascacsio
Yvette Pascacsio
5,522 Points

Didn't have the same effect for me.