1. Flex-grow означает увеличение ширины, занимаемой гибкими элементами. Расширенное пространство — это оставшееся пустое пространство после исключения элементов.
2. Отрицательные значения не поддерживаются. Значение по умолчанию — 0, что означает, что оставшееся пустое пространство не будет занято для расширения его ширины.
Если flex-grow больше 0, произойдет выделение оставшегося пространства в гибком контейнере.
Пример
// HTML-часть <div>
<div></div>
<div></div>
<div></div>
</div>
// 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. Надеюсь, оно будет полезно всем.