Flex Basis, Flex Grow, Flex Shrink

HTML-CSS
1

In the lesson, ‘CSS Flexbox: Use the flex-basis Property to Set the Initial Size of an Item’, I would like to know at what point is flex basis set and then at point does flex grow and shrink start to behave?

Like, when the first time the browser loads the page, does the css take in the current dimensions and apply flex basis at that time? And then if we resize the window, it applies flex grow and shrink depending on if we’re expanding or compressing?

2

flex-basis is the size the flex item would be without any growing or shrinking. flex-grow and flex-shrink are properties that are always applied. They describe how the flex item should grow or shrink.

3

You can think of flex basis as the default size before growing or shrinking :slight_smile: any value lower than that won’t make the flex item shrink