flex-grow: рост

Насколько элемент растянется на свободное место по главной оси.

Уровень: средний 10 разделов 10 минут

1. Что это и зачем

Насколько элемент растянется на свободное место по главной оси.

Flexbox выстраивает элементы вдоль одной оси: главная определяет направление, поперечная — выравнивание. Контейнер распределяет свободное место через flex-grow и flex-shrink, а выравнивает элементы через justify-content и align-items.

{title} — основной инструмент для строк: панели, меню, кнопки выровнены за минуту.

2. Синтаксис и пример

.main { flex-grow: 1; }

Запись выше — базовый вариант использования. Обратите внимание, как flex-grow: рост вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Гибкие контейнеры решают раскладку меню, шапок, карточек и строк: gap для отступов, flex-wrap переносит элементы, ось меняется с ряда на колонку. Разметка внутри контейнера выстраивается в строку, а при нехватке места аккуратно переносится.

В реальной разметке flex-grow: рост встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — основной инструмент для строк: панели, меню, кнопки выровнены за минуту.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Flexbox поддержан во всех современных браузерах, префиксная эпоха позади. Единственное ограничение — настоящие сетки из двух осей удобнее делать через Grid.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Коэффициенты делят свободное место между «растущими».

grow без базиса часто даёт сюрпризы ширины.

7. Практическое задание

Сделайте главную колонку «главной».

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.main { flex-grow: 1; }

8. Как применять в проектах

Заголовок + кнопка в одной строке, горизонтальное меню, карточки-строки, центрирование через justify-content и align-items — типичные задачи Flexbox.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

ось выбрана осознанно (row/column);
gap вместо маргинов-костылей;
переносы flex-wrap продуманы на малых экранах;
justify и align заданы явно;
нет жёстких ширин, где должен быть flex;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам