CSS свойство flex-grow

Определяет коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекс-элемента. К примеру, если для всех элементов установлено значение 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;}