Как можно гибко изменять размеры элементов с помощью 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>].

Примеры:

css