How can you flexibly change the sizes of elements…

The sizes of elements in flexbox can be flexibly changed using the properties flex-grow, flex-shrink, and flex-basis.

flex-grow: Determines how much an element can grow to occupy free space in the container. The default value is 0 (does not grow). A higher value indicates a larger growth factor relative to other elements.
flex-shrink: Determines how much an element can shrink when there is insufficient free space. The default value is 1 (shrinks). A higher value indicates a larger shrinkage factor.
flex-basis: Defines the initial size of the element before free space is distributed. It can be set as a fixed value (px, %, rem) or a keyword (auto, content).

These three properties are often combined in the shorthand property flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Examples of usage:

/* The element will occupy all available space */
.flex-item {
  flex-grow: 1;
}

/* The element will not shrink when space is insufficient */
.flex-item {
  flex-shrink: 0;
}

/* The element has a base size of 100px and expands if there is space */
.flex-item {
  flex: 1 1 100px;
}

/* The element has a base size determined by its content and can shrink */
.flex-item {
  flex: 0 1 auto; /* Equivalent to flex: initial; */
}

/* The element does not grow, does not shrink, and has a base size determined by its content */
.flex-item {
  flex: 0 0 auto; /* Equivalent to flex: none; */
}

/* The element grows, shrinks, and has a base size of 0 (useful for creating elements of equal width) */
.flex-item {
  flex: 1 1 0; /* Equivalent to flex: auto; */
}

Using these properties allows precise control over the behavior of elements inside a flex container when the screen size or content changes.

How can you flexibly change the sizes of elements using flexbox?