CSS-компоновка: когда использовать flexbox, а когда grid

Что это такое

MDN описывает flexbox как одномерную модель компоновки: flex-контейнер размещает элементы вдоль главной оси (строки или столбца), распределяет свободное пространство через flex-grow, flex-shrink и flex-basis и может переносить элементы на несколько линий с помощью flex-wrap, причём каждая линия раскладывается отдельно. Grid двумерен: grid-template-columns и grid-template-rows задают дорожки (с единицей fr, repeat() и minmax()), элементы размещаются в ячейках или именованных областях, а содержимое, не помещающееся в явную сетку, создаёт неявные дорожки. Обе модели используют gap и свойства выравнивания блоков, например align-items и justify-content.

Почему это важно

Большинство дефектов компоновки — выходящий за границы текст, не совпадающие столбцы или скачки содержимого при определённой ширине области просмотра — возникает из-за выбора неподходящей модели. Перенесённые flex-линии не выравнивают элементы между линиями, поэтому сетки карточек на flexbox смещаются. Grid с фиксированными дорожками в пикселях не адаптируется к содержимому или узким экранам.

Как применять

• Размер задаёт содержимое (навигационные панели, ряды кнопок, списки тегов, вертикальное центрирование одного элемента): flexbox.
• Размер задаёт структура (каркас страницы с шапкой, боковой панелью и основной областью; формы с выровненными подписями; сетки карточек, где строки должны совпадать): grid.
• Адаптивная сетка карточек без медиазапросов: grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)).
• Разрешайте flex-элементам сжиматься: элемент сжимается лишь до своего минимального размера по содержимому, поэтому длинные неразрывные строки вызывают переполнение; задавайте таким элементам min-width: 0 (или overflow-wrap: anywhere).
• Используйте gap для промежутков между элементами вместо внешних отступов у дочерних элементов, которые появляются и по краям.
• Свободно вкладывайте модели друг в друга: grid для страницы, flexbox внутри компонентов; проверяйте результат при узкой ширине телефона и при большой ширине.

Подводные камни

justify-content действует только вдоль главной оси; для центрирования в обоих направлениях нужен также align-items либо place-items: center в grid. Процентная высота дочернего flex-элемента требует определённой высоты родителя. order и row-reverse меняют визуальный порядок, но не порядок DOM, которому следуют клавиатурный фокус и программы экранного доступа, из-за чего навигация по странице может стать запутанной.