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

Michael Pashkov
Michael Pashkov
22,024 Points
Posted by Michael Pashkov
Michael Pashkov
22,024 Points

Can we do this as a variant? flex: 2 200px;

.item { flex: 1 200px;

}

.item-2 { flex: 2 200px; }

instead of

.item { flex: 1 200px; }

.item-2 { flex-grow: 2; }

Shaun Wong
Shaun Wong
14,489 Points
Shaun Wong
Shaun Wong
14,489 Points

I don't see why it wouldn't work. Best to test it and see if the results are the same as you were looking for.

The shorthand for two values are Flex grow, and Flex basis.

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

View MDN for the other shorthand properties. https://developer.mozilla.org/en-US/docs/Web/CSS/flex

1 Answer

Michael Pashkov
Michael Pashkov
22,024 Points
Michael Pashkov
Michael Pashkov
22,024 Points

Thank you Shaun Wong for your reply. Guil said we should do this way when declaring flex-grow for independent item. After declaring for all items. And I was just queries...

item { flex: 1 200px; } // for all

.item-2 { flex-grow: 2; } // for one as a second declaration replace with .item-2 { flex: 2 200px; }