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

Frank Book
Frank Book
308 Points
Posted by Frank Book
Frank Book
308 Points

flex property values

As I read on MDN the second value in flex: property is flex-shrink. Once we set up the first value for flex item it will set up flex-basis to 0 which is the 3. value in the flex: property. Can you please explain me.

.item{
flex: 1 200px;
}
michael apprich
michael apprich
9,989 Points

The MDN article can be a bit confusing I think. Check out this article on CSS Tricks. I find their explanation easier to understand when it comes to the shorthand syntax based on how many values you are using. https://css-tricks.com/almanac/properties/f/flex/

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The "flex" shorthand is a bit tricky, and if you use less than 3 arguments what actually gets set will depend on the type of argument(s) provided.

When you give 2 values, the first one will always be flex-grow; but the second one can be either flex-shrink or flex-basis depending on the value given.

A plain number will be used for flex-shrink (and flex-basis will be set to 0), but a pixel dimension as you show here will be interpreted as flex-basis (and flex-shrink will be set to 1).