Flexbox sizing mental model

The following explanation from Anna Monus is taken out of A Comprehensive Guide to Flexbox Sizing and I find Anna´s text most helpful. Anna has written a multi-part flexbox tutorial, which consists of

1. A Comprehensive Guide to Flexbox Alignment
2. A Comprehensive Guide to Flexbox Ordering & Reordering
3. A Comprehensive Guide to Flexbox Sizing
4. Flexbox vs. CSS Grid: Which Should You Use and When?

Below is the default setting for flex.

flex: 0 1 auto;

/* this translates to */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

The default setting tells the item:

• do not grow if there is available space left
• shrink if there is not enough available space
• size the item initially based on it´s width and height setting, or based on the content if no width/height is set. The item will get shrinked if there is not enough space available.

Anna´s explanation:

… Flexbox’s sizing properties allow you to make decisions about three kinds of scenarios:

• flex-grow: how flex items should behave when there’s a surplus of free space (how they should grow).
• flex-shrink: how flex items should behave when there’s a shortage of free space (how they should shrink).
• flex-basis: how flex items should behave when there’s exactly as much space as needed.

As flexbox is a one-dimensional layout, as opposed to CSS Grid which is two-dimensional, you can allocate free space along the main axis (whether that be top to bottom, bottom to top, left to right, or right to left). You can set the direction of the main axis using the flex-direction property.

… Note that while flex-grow and flex-shrink have relative values (0, 1, 2, etc.), flex-basis always takes an absolute value (px, rem, content, etc.).