flex: <flex-grow> <flex-shrink> <flex-basis>

CSS

.container {
  display: flex;
}

// default
.box-1 {
  flex: 0 1 auto;
}

Box-1

Box-2

Box-3

Box-4

Box-5

CSS

.container {
  display: flex;
}

.box-1 {
  flex: 0 1 200px;
}

Box-1

Box-2

Box-3

Box-4

Box-5

CSS

.container {
  display: flex;
}

.box-1 {
  flex: 0 0 200px;
}

Box-1

Box-2

Box-3

Box-4

Box-5

If you provide one value to the flex property, it sets the flex-grow value.

If you provide two numeric values, they set flex-grow and flex-shrink.

If any value includes a unit like px or %, that value becomes the flex-basis.

When all three values are provided, they represent flex-grow, flex-shrink, and flex-basis in order.

CSS

/* Keyword value */
flex: none; /* 0 0 auto */

/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */

/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px; /* 1 1 30px */

/* Two values: flex-grow | flex-shrink */
flex: 2 2; /* 2 2 0% */

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;