Understanding flex-grow, flex-shrink, and flex-basis
The three components of the flex shorthand property each control a different aspect of a flex item's behavior within a flex container.
flex-grow: Determines how much a flex item can grow relative to other items when there is extra space. A value of 0 means the item will not grow.flex-shrink: Determines how much a flex item can shrink relative to other items when space is limited. A value of 1 means the item can shrink if needed.flex-basis: Sets the initial main size of the item before distributing space. It can be a length, percentage, orauto(default), which uses the item's content size.
In this example, Item 2 grows faster than Items 1 and 3 due to a higher flex-grow. Item 3 can shrink more than others because of a higher flex-shrink. Each item starts with its specified flex-basis as the initial size.