Гибко изменять размеры элементов во flexbox можно с помощью свойств flex-grow, flex-shrink и flex-basis.

flex-grow: Определяет, насколько элемент может растягиваться, занимая свободное пространство в контейнере. Значение по умолчанию 0 (не растягивается). Более высокое значение означает больший коэффициент растяжения относительно других элементов.
flex-shrink: Определяет, насколько элемент может сжиматься при недостатке свободного пространства. Значение по умолчанию 1 (сжимается). Более высокое значение означает больший коэффициент сжатия.
flex-basis: Определяет базовый размер элемента до распределения свободного пространства. Может быть задан как фиксированное значение (px, %, rem) или ключевое слово (auto, content).

Эти три свойства часто комбинируются в сокращенном свойстве flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Примеры использования:

/* Элемент будет занимать все доступное пространство */
.flex-item {
  flex-grow: 1;
}

/* Элемент не будет сжиматься при недостатке места */
.flex-item {
  flex-shrink: 0;
}

/* Элемент имеет базовый размер 100px, а затем расширяется, если есть место */
.flex-item {
  flex: 1 1 100px;
}

/* Элемент имеет базовый размер, определяемый его содержимым, и может сжиматься */
.flex-item {
  flex: 0 1 auto; /* Эквивалентно flex: initial; */
}

/* Элемент не растягивается, не сжимается и имеет базовый размер, определяемый его содержимым */
.flex-item {
  flex: 0 0 auto; /* Эквивалентно flex: none; */
}

/* Элемент растягивается, сжимается и имеет базовый размер 0 (удобно для создания одинаковых по ширине элементов) */
.flex-item {
  flex: 1 1 0; /* Эквивалентно flex: auto; */
}

Использование этих свойств позволяет точно управлять поведением элементов внутри flex-контейнера при изменении размеров экрана или содержимого.

Как можно гибко изменять размеры элементов, использующих flexbox?