flex-grow
Какую часть свободного места забирает flex-элемент.
Синтаксис
flex-grow: number;Значения
| Параметр | Тип | Описание |
|---|---|---|
| 0 | number | Не растёт (по умолчанию). |
| 1, 2… | number | Доля свободного места относительно других элементов. |
Примеры
Поле поиска занимает всё место рядом с кнопкой:
<style>
.bar { display: flex; gap: 6px; }
.bar > * { padding: 6px; }
</style>
<div class="bar">
<input placeholder="Search" style="flex-grow: 1;">
<button>Find</button>
</div>Примечания
Делится только свободное место: элемент с flex-grow: 2 не обязательно вдвое шире — он получает вдвое больше дополнительной ширины.
См. также
- flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
- flex-shrink — Насколько сжимается flex-элемент, когда места не хватает.
- flex-basis — Начальный размер flex-элемента вдоль главной оси до раздачи свободного места.
Вопросы и ответы по теме
В учебнике
- Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.