Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Flexbox "flex-basis"

Can someone help me understand better of this concept. I understand how " flex-grow" works, but when using the flex short hand property, I simply don't understand how "flex-basis" works.

Thanks.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Flex-basis sets the initial width of the flex-items. It overrides the width property if set. When the flex-container is resized, the flex items will wrap when they are no longer the size of the desired flex-basis (e.g. a 300px flex basis, the items will wrap to the next line when they are no longer that 300px size) providing that you have the flex-wrap property set to wrap as well. So to summarize, the flex-basis property sets the initial width of the flex-items of a flex-container.