Flexbox против Grid
Вопрос
Когда брать flexbox, а когда grid?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
flex - раскладка вдоль одной оси
grid - двумерная сетка: строки и колонки сразу
flex распределяет свободное место между элементами
grid задаёт структуру заранее, элементы встают в ячейки
flex-basis против width: основа считается по главной оси
их комбинируют: grid на страницу, flex внутри блоков
Что могут спросить следом
- Почему длинный текст растягивает flex-контейнер
- Как сделать сетку карточек без медиазапросов
- Что делает minmax и auto-fill
Разбор
Flexbox одномерный: элементы выстраиваются вдоль одной оси, а контейнер распределяет между ними свободное место. Он естественен для панели кнопок, шапки, карточки с прижатым низом.
Grid двумерный: структура строк и колонок задаётся в контейнере, дети занимают ячейки -
это раскладка страницы, галерея, сложная форма. grid-template-areas делает раскладку
читаемой прямо в коде.
Практически их не противопоставляют: grid на уровне страницы и крупных блоков, flex внутри компонентов.
Частая путаница - flex-basis против width: основа отсчитывается по главной оси
и участвует в распределении, а flex-shrink по умолчанию 1, поэтому элемент может стать
уже заданной ширины - отсюда min-width: 0 в рецептах против переполнения.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.