Чем Flexbox отличается от CSS Grid и когда что выбирать?
Короткий ответ
- Flexbox — одномерная раскладка: строка или колонка
- Grid — двумерная: строки и колонки одновременно
- Flex распределяет место от содержимого элементов
- Grid задаёт структуру от контейнера: явные треки
- gap работает и там и там
- Grid умеет накладывать элементы и именовать области
- Это не конкуренты: обычно используются вместе
Flexbox раскладывает элементы вдоль одной оси от содержимого, Grid задаёт двумерную сетку от контейнера; шапки и ряды кнопок — flex, целые макеты страниц и карточные сетки — grid.
Как сказать вслух
пример ответаFlexbox раскладывает элементы вдоль одной оси — в строку или в колонку — и хорошо подстраивается под содержимое: элементы растягиваются и сжимаются. Grid работает в двух измерениях сразу: я описываю сетку из строк и колонок на контейнере, а элементы расставляю по ячейкам. Поэтому для панелей, шапок и выравнивания пары элементов беру flex, а для макета страницы или сетки карточек — grid. В реальной вёрстке они всегда сочетаются.
Подробный ответ
Основной ответ
Flexbox управляет распределением пространства вдоль главной оси: flex-grow, flex-shrink и flex-basis описывают, как элементы делят свободное место, justify-content и align-items — выравнивание. Перенос строк возможен (flex-wrap), но каждая строка живёт независимо — выровнять элементы в колонки между строками flex не может. Grid описывает структуру на контейнере: grid-template-columns/rows задают треки, в том числе гибкими единицами fr, функциями minmax() и повторами repeat(); элементы размещаются автоматически или явно по линиям и именованным областям (grid-template-areas). Паттерн repeat(auto-fill, minmax(250px, 1fr)) даёт адаптивную сетку карточек без медиазапросов. Grid также допускает наложение элементов в одну ячейку. Подход к выбору: раскладка диктуется содержимым — flex, содержимое вписывается в заданную структуру — grid.
Ключевые моменты
- Одна ось против двух. Flex выравнивает вдоль одной оси, grid контролирует строки и колонки одновременно.
- От контента или от контейнера. Flex «слушает» размеры содержимого, grid навязывает структуру сверху.
- Адаптивные сетки. auto-fill с minmax строит отзывчивые сетки без единого медиазапроса.
- Совместное использование. Типичная страница: grid для каркаса, flex внутри ячеек для рядов и выравнивания.
Практический контекст
Это вопрос на базовую вёрстку, часто с практикой: отцентрировать элемент, сверстать карточную сетку, прижать футер к низу. Интервьюер смотрит, не тянет ли кандидат flex туда, где нужна настоящая сетка, и знает ли современные возможности — gap, aspect-ratio, выравнивание в grid. Упоминание того, что обе технологии давно поддержаны всеми браузерами и float для раскладки мёртв, лишним не будет.
Частые ошибки
- Строят двумерные «таблицы» на flex-wrap и мучаются с выравниванием колонок
- Не знают единицу fr и minmax, задавая колонки процентами
- Говорят, что grid «плохо поддерживается» — это давно не так