Пусть второй гибкий элемент станет в три раза шире остальных:
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
CSS свойство flex-grow определяет, насколько элемент будет увеличиваться относительно остальных гибких элементов внутри того же контейнера.
Примечание: Если элемент не является гибким элементом, CSS свойство flex-grow не имеет никакого эффекта.
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.flexGrow="5" Попробуй |
Поддержка flex-grow
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| flex-grow | 29.0 21.0-webkit- |
11.0 | 28.0 18.0-moz- |
9.0 6.1-webkit- |
17.0 |
Синтаксис flex-grow
flex-grow: number|initial|inherit;
Значения flex-grow
| Значение | Описание | Демонстрация |
|---|---|---|
| number | Число, указывающее, насколько увеличится номенклатура по отношению к остальным гибким номенклатурам. Значение по умолчанию - 0 | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме flex-grow
CSS Учебник: CSS Гибкий бокс
CSS Справочник: flex свойство
CSS Справочник: flex-basis свойство
CSS Справочник: flex-direction свойство
CSS Справочник: flex-flow свойство
CSS Справочник: flex-shrink свойство
CSS Справочник: flex-wrap свойство
HTML DOM справочник: flexGrow свойство