CSS flex-grow Свойство
Пример
Пусть второй Flex-Item расти в три раза шире, чем остальные:
/* 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;}
/* Standard syntax */
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 |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.flexGrow="5" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -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) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex Свойство
CSS Справка: flex-basis Свойство
CSS Справка: flex-direction Свойство
CSS Справка: flex-flow Свойство
CSS Справка: flex-shrink Свойство
CSS Справка: flex-wrap Свойство
HTML DOM Справочник: flexGrow Свойство