Вопрос с собеседования · Frontend

Чем Flexbox отличается от Grid и когда что использовать?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как отцентрировать элемент в CSS?
Коротко

Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы одновременно, раскладка задаётся контейнером. Flex — панели, меню, ряды кнопок; Grid — каркас страницы, карточки в сетке, формы.

  • Центрирование: display: flex (или grid); place-items: center / justify-content + align-items
  • gap работает и во flex, и в grid
  • flex: 1 — элемент забирает свободное место

А ещё Их сочетают: grid для каркаса, flex внутри ячеек

Подробно

Flexbox: главная ось (flex-direction), justify-content — вдоль неё, align-items — поперёк. flex: grow shrink basis управляет распределением свободного места; flex-wrap переносит элементы, но каждая строка раскладывается независимо — столбцы не выравниваются.

Grid: grid-template-columns/rows, единица fr (доля свободного места), minmax, repeat(auto-fill, ...) — адаптивная сетка без медиазапросов; именованные области grid-template-areas; элементы можно размещать в любые ячейки.

Правило выбора: важен поток содержимого в одном направлении — flex; важно выравнивание по строкам и столбцам сразу — grid.

Пример

.center { display: grid; place-items: center; }

.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar .spacer { flex: 1; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

Что хотят услышать

  • Одномерность и двумерность.
  • Типичные применения.
  • Способы центрирования.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Flexbox — одномерная раскладка вдоль оси, Grid — двумерная по строкам и столбцам
  • ✗Grid — одномерная раскладка вдоль оси, а Flexbox — двумерная по строкам и столбцам сразу
  • ✗Flexbox нельзя использовать для центрирования
  • ✗Grid подходит только для таблиц с данными

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования