flex-grow
Поддержка браузерами
| 11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство flex-grow указывает сколько свободного пространства может занять flex-элемент относительно других элементов внутри flex-контейнера.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | к flex-элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.flexGrow="2"; |
Синтаксис
flex-grow: число;
Значения свойства
| Значение | Описание |
|---|---|
| число | Значение по умолчанию 0, указывает что элемент имеет заданные размеры или размеры относительно его содержимого. Все положительные значения указывают, как будет распределяться свободное пространство между всеми flex-элементами. Например, есть 5 элементов с шириной в 100px каждый, они лежат в контейнере с шириной в 1000px. Если каждому из них задать flex-grow: 1, то свободное пространство в 500px будет поделено на 5 и поровну разделено между всеми элементами (по 100px на каждый). Если одному из 5 элементов задать flex-grow: 6, то 500px будет разделено на 10 частей (так как в сумме значения свойства flex-grow дали 10) и элементам со значением 1 достанется по 50px (500 : 10 · 1 = 50) свободно пространства, а элементу со значением 6 - 300px (500 : 10 · 6 = 300). Если только одному из flex-элементов было задано свойство flex-grow с любым положительным значение, то этот элемент займёт всё свободное пространство. |
Пример
Всем flex-контейнерам, кроме синего задано flex-grow: 1;, они не имеют фиксированной ширины, поэтому пространство flex-контейнера будет распределятся в зависимости от значения свойства flex-grow:
CSS Свойство:
flex-grow:
Результат:
1
2
3
4
5
CSS Код:
#myBlueDiv {
flex-grow: 0;
}
flex-grow: 0;
}