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

Свойствами flex-grow, flex-shrink и flex-basis.

• flex-grow: Определяет, насколько элемент может увеличиваться относительно других элементов во flex-контейнере. Значение по умолчанию — 0 (не растягивается).
• flex-shrink: Определяет, насколько элемент может сжиматься относительно других элементов во flex-контейнере. Значение по умолчанию — 1 (может сжиматься).
• flex-basis: Задает начальный размер flex-элемента до того, как пространство будет распределено с помощью flex-grow и flex-shrink. Значение по умолчанию — auto (размер зависит от содержимого или явно заданного размера).

Их можно использовать по отдельности или в сокращенной записи flex: [<flex-grow>] [<flex-shrink>] [<flex-basis>].

Примеры:

.container {
  display: flex;
}

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

.item2 {
  flex-shrink: 0; /* Элемент не будет сжиматься */
  flex-basis: 100px; /* Начальный размер 100px */
}

.item3 {
  flex: 1 1 auto; /* grow=1, shrink=1, basis=auto */
}

.item4 {
  flex: 0 0 50px; /* grow=0, shrink=0, basis=50px - фиксированный размер */
}

Таблица с основными значениями flex: