Что такое свойство flex-grow в CSS

1. Flex-grow означает увеличение ширины, занимаемой гибкими элементами. Расширенное пространство — это оставшееся пустое пространство после исключения элементов.

2. Отрицательные значения не поддерживаются. Значение по умолчанию — 0, что означает, что оставшееся пустое пространство не будет занято для расширения его ширины.

Если flex-grow больше 0, произойдет выделение оставшегося пространства в гибком контейнере.

Пример

 // HTML-часть 





// CSS part.box{
ширина: 600 пикселей;
высота: 200 пикселей;
граница: сплошная 1 пиксель;
дисплей: гибкий;
}
.box div:nth-of-type(1){
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
}
.box div:nth-of-type(2){
ширина: 150 пикселей;
высота: 100 пикселей;
цвет фона: небесно-голубой;
}
.box div:nth-of-type(3){
ширина: 200 пикселей;
высота: 100 пикселей;
цвет фона: желтый;
}

Вышеупомянутое представляет собой введение в атрибут flex-grow в CSS. Надеюсь, оно будет полезно всем.