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 Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Lu Favela
seal-mask
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 15,571 Points
Posted by Lu Favela
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 15,571 Points

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
Jamie Reardon
.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.