The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;initial
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".
auto
The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto".
none
The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto".
positive unitless number (integer)
Equivalent to "flex: integer 1 0px".
The flex-grow CSS property sets the flex grow factor of a flex item's main size.
This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
Source: https://www.samanthaming.com/flexbox30/22-flex-grow-calculation/
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
Source: https://www.samanthaming.com/flexbox30/24-flex-shrink-calculation/
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
Source: https://www.samanthaming.com/flexbox30/25-flex-basis/
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/flex