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

определение и использование

атрибут flex-grow определяет рост элемента по сравнению с другими эластичными элементами в том же контейнере.

комментарий:атрибут flex не имеет значения, если элемент не является эластичным элементом.

дополнительная информация:

Урок CSS: CSS эластичный контейнер

Руководство по CSS:атрибут flex

Руководство по CSS:атрибут flex-basis

Руководство по CSS:атрибут flex-direction

Руководство по CSS:атрибут flex-flow

Руководство по CSS:атрибут flex-shrink

Руководство по CSS:атрибут flex-wrap

Руководство по HTML DOM:атрибут flexGrow

пример

сделайте ширину второго эластичного элемента в три раза больше, чем у других эластичных элементов:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

попробуйте сами

CSS синтаксис

flex-grow: number|initial|inherit;

значение атрибута

значение описание
number числовое значение, определяющее рост этого элемента по сравнению с другими эластичными элементами. По умолчанию 0.
initial устанавливает этот атрибут в его значение по умолчанию. См. также initial.
inherit переопределяет этот атрибут с помощью значения, переданного родительским элементом. См. также inherit.

технические детали

по умолчанию: 0
наследование: нет
создание анимации: поддерживается. См. также:атрибуты, связанные с анимацией.
версия: CSS3
JavaScript синтаксис: object.style.flexGrow="5"

поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут. Используйте префиксы -webkit-, -ms- или -moz- перед числами для первой версии, определяемой правилами.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0