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

Guadalupe Favela
Guadalupe Favela
3,583 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
Jamie Reardon
Front End Web Development Techdegree Student 4,877 Points

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.