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 trialHarsh 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
231,236 Points
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
15,604 PointsAntonio Jaramillo
15,604 PointsThe 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
231,236 PointsSteven Parker
231,236 PointsYou'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
7,095 PointsStephen Chamroeun
7,095 PointsThank you for sharing the info on the Flexy Boxes. It's a tad more easier on the eyes then the Flexbox Playground :).
Alexis Ruiz
9,237 PointsAlexis Ruiz
9,237 PointsStill, Why doesn't it work if we just code "flex-grow" instead of its shorthand?
Steven Parker
231,236 PointsSteven Parker
231,236 PointsYou need all 3 properties if you want an exact replacement for the shorthand.