skip to main content

flex-grow

css

Кратко 🔗

Это свойство указывает, может ли и на сколько вырастать флекс-элемент при наличии свободного места.

Пример 🔗

В этом примере элемент с классом item вырастет по ширине, игнорируя значение ширины и размер контента. Но только при наличии свободного места.

.container {
display: flex;
}

.item {
flex-grow: 1;
}

Как это понять 🔗

Если у всех флекс-элементов будет прописано flex-grow: 1, то свободное пространство в контейнере будет равномерно распределено между ними всеми.

Если при этом одному из элементов мы зададим flex-grow: 2, то он постарается отжать себе в два раза больше свободного места, чем его соседи.

Как пишется 🔗

По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

Подсказки 🔗

💡 Очень удобно задать всем флекс-элементам flex-grow: 1 и тогда они будут равного размера и займут всё внутреннее пространство родителя.
💡 Свойство работает с пропорциональным разделением пространства, не с конкретными размерами. Разобраться во всём поможет статья «Как реально работает flex-grow».

Автор: Алёна,