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 Свойство