flex-grow и flex-shrink определяют, как элементы адаптивно изменяют свой размер внутри flex-контейнера, когда есть свободное пространство или недостаточно места соответственно.
flex-grow - определяет коэффициент, по которому элемент должен увеличиваться при наличии свободного пространства в контейнере. Значение по умолчанию - 0 (элемент не растягивается). Если у нескольких элементов flex-grow больше 0, свободное пространство распределяется между ними пропорционально их значениям flex-grow.
cssflex-shrink - определяет коэффициент, по которому элемент должен сжиматься при недостаточном пространстве в контейнере. Значение по умолчанию - 1 (элемент сжимается пропорционально другим сжимающимся элементам). Значение 0 предотвращает сжатие элемента.
cssВместе с flex-basis они формируют сокращенное свойство flex: flex: <flex-grow> <flex-shrink> <flex-basis>.
Пример использования:
htmlcssЕсли контейнер шире 200px (100px + 100px), item-1 займет все оставшееся свободное пространство. Если контейнер уже 200px, item-2 сохранит свой базовый размер 100px, а item-1 будет сжиматься.