Как работает свойство flex-grow в Flexbox?

Свойство flex-grow в Flexbox устанавливает изменение одного элемента внутри контейнера по отношению к остальным. practicum.yandex.ru Оно упрощает разработку адаптивных макетов, например, работу flex-grow можно увидеть при отображении таблиц в десктопной и мобильной версиях сайтов. practicum.yandex.ru

Некоторые особенности работы свойства:

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

Пример: есть три элемента с flex-grow-значениями 1, 2 и 1. practicum.yandex.ru Элемент 2 займёт в два раза больше свободного пространства, чем другие. practicum.yandex.ru

По умолчанию значение flex-grow равно 0, что означает, что блокам запрещено увеличиваться в размерах. tproger.ru