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!

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 Flexbox Properties Smarter Layouts with flex-basis and flex

Posted by xajx
xajx
6,553 Points

flex shorthand confusion

In the video, when .item is set to flex: 1 200px and .item-2 is set to flex: 2; why did item-2 get a default value of 0?

1 Answer

Johnny Austen
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Front End Web Development Techdegree Graduate 35,494 Points
Johnny Austen
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Front End Web Development Techdegree Graduate 35,494 Points

I believe this is because when the flex shorthand is used, the flex-basis is reset to 0 if a value is not provided. So if you just want to affect the flex-grow property, it's best to not use the shorthand.