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

Гибко изменять размеры элементов во 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>;.

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

css