Руководство CSS

Правила CSS (CSS RULES)

Полный список свойств CSS

Свойство flex-shrink в CSS3 Свойство flex-flow в CSS3

Метод использования и примеры свойства flex-grow CSS3

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

В таблице приведено описание использования и истории версий этого свойства, а также синтаксис использования свойства в скриптах JavaScript.

Default:	0
Подходит для:	Эластичные элементы
Наследование:	Нет
Анимация:	Да.См. также Анимационные свойства.
Версия:	Новая функция CSS3
Синтаксис JavaScript:	объект.style.flexGrow="1"

Использование синтаксиса flex-grow

Грамматика этого свойства такая:

flex-grow:　number　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство flex-grow.

Пример

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6.1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6.1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6.1+　*/
　　　　flex-grow:　5;
}

Проверьте, как это работает‹/›

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

Таблица ниже описывает значения этого свойства.

Значение	Описание
number	Положительное число, определяющее эластичность элементаЭластичное увеличениеКоэффициент. Значение по умолчанию равно 0. Отрицательные числа недопустимы.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение flex-grow родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойства flex-grow, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 18+ ^-moz-, 28+ Google Chrome 21+ ^-webkit-, 29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Дополнительное чтение

Узнайте больше из следующих руководств:CSS3 многостраничная разметка.

Связанные свойства:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

Свойство flex-shrink в CSS3 Свойство flex-flow в CSS3