Определяет коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекс-элемента. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.
CSS синтаксис
flex-grow: число | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| число | Положительное целое или дробное число, устанавливающее коэффициент увеличения флекс-элемента. Значение по умолчанию 0. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем, чтобы ширина каждого второго флекс-элемента была в три раза больше остальных
/* Safari 6.1+ */
div:nth-of-type(1) {-webkit-flex-grow: 1;}
div:nth-of-type(2) {-webkit-flex-grow: 3;}
div:nth-of-type(3) {-webkit-flex-grow: 1;}
/* Стандартный синтаксис */
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
