CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Victor Mercier
Victor Mercier
4,675 Points

Flex grow and flex basis

If I understand well, a flex-basis value of 0 makes the browser unable to redistribute the space even if you have a flex-grow value?

1 Answer

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 12,522 Points

Flex-basis sets the initial width value of the flex-items. When you have the flex-wrap value set to wrap, the flex-items will start to wrap to a new line when this threshold value can not fit on one line. Flex-grow expands the flex-items, allowing them to grow into the available space of a flex-container. A value of 1 will distribute the space evenly between each of the flex-items, meaning you will have equal width flex-items.