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

Пример

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

/* 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;}

Редактор кода »

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

Свойство flex-grow указывает, насколько элемент будет расти относительно остальных гибких элементов внутри того же контейнера.

Примечание: Если элемент не является гибким элементом, то свойство flex-grow не имеет никакого эффекта.

Значение по умолчанию:	0
Унаследованный:	нет
Анимируемый:	да Прочитайте о animatable Попробовать
Версия:	CSS3
JavaScript синтаксис:	object.style.flexGrow="5" Попробовать

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

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

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Свойство
flex-grow	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS Синтаксис

flex-grow: number|initial|inherit;

Значение свойств

Значение	Описание	Воспроизвести
number	Число, определяющее, насколько элемент будет расти относительно остальных гибких элементов. По умолчанию значение 0	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit