В чем разница между flex-grow и flex-shrink при адаптивной верстке?

Разница между flex-grow и flex-shrink при адаптивной вёрстке заключается в том, как эти свойства влияют на поведение элементов внутри flex-контейнера. practicum.yandex.ru skillbox.ru

Flex-grow позволяет указать, какую долю свободного пространства во flex-контейнере может занимать элемент, или, другими словами, в какой степени он может «расти» вдоль главной оси. skillbox.ru Некоторые особенности свойства:

• Работает только при наличии свободного места, иначе контейнер не позволит менять размер элемента. practicum.yandex.ru
• При одинаковом значении элементы поделят свободное пространство поровну. practicum.yandex.ru
• Элемент с большим значением займёт больше места, соответственно, элементы с меньшим значением займут меньше места. practicum.yandex.ru

Flex-shrink, в противоположность flex-grow, позволяет указать, насколько сильно элемент должен сжиматься, если суммарная ширина элементов превышает размер контейнера. skillbox.ru Некоторые особенности свойства:

• Полезно в ситуациях, когда контейнер меньше, чем ширина или высота элементов. practicum.yandex.ru
• Сжимает элементы вслед за контейнером, тем самым исключая переполнение. practicum.yandex.ru
• При этом с flex-shrink можно не бояться, что элементы нарушат структуру макета при сжатии. practicum.yandex.ru
• Элементы с ненулевым значением flex-shrink будут сжиматься, насколько это возможно, с учётом значений flex-shrink других элементов. skillbox.ru