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 Harsh Munjal
Harsh Munjal
6,040 Points

'Flex' shorthand works find. 'Flex-grow' doesn't. Am i doing something wrong?

.col{ flex: 1; }

above rule gives me desired result.

.col{ flex-grow: 1; } should give same result, but it doesn't.

Unable to find the reason...

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

:point_right: The flex shorthand replaces three properties.

When you set flex, you are actually setting these three properties: flex-grow, flex-shrink and flex-basis. When you specify less than all three, the others are set for you. The system attempts to make "intelligent" choices about the unspecified values based on the one(s) given, so they may receive settings other than the defaults.

So setting this:

.col { flex: 1; }

It is actually shorthand for all this:

.col {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

To explore flexbox further, you might enjoy one of these interactive demos: Flexbox Playground and Flexy Boxes.

There's also the very cute tutorial game Flexbox Froggy.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

The default value of the flex-basis property is "auto" rather than "0%". You're getting a different result because using the shorthand flex property will set flex-basis to "0%".

Try using the property "flex-grow" in your .primary rule in your second media query. You'll get the same result as using "flex" because you've already set flex-basis to "0%" in your shorthand property in the first media query.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You're right that the default value for flex-basis is "auto", but when you use the "flex" shorthand with a single numerice value the flex-basis is changed to 0. See the MDN page for more info.

Stephen Chamroeun
Stephen Chamroeun
7,095 Points

Thank you for sharing the info on the Flexy Boxes. It's a tad more easier on the eyes then the Flexbox Playground :).

Alexis Ruiz
Alexis Ruiz
9,237 Points

Still, Why doesn't it work if we just code "flex-grow" instead of its shorthand?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You need all 3 properties if you want an exact replacement for the shorthand.