CSS Flexbox: одномерные раскладки

Коротко: Flexbox располагает элементы в строку или столбец, распределяет свободное место и выравнивает их. Это стандартный инструмент для меню, рядов карточек и центрированного содержимого.

Подробнее: Контейнер превращают во «flex-блок» через display: flex. Его прямые потомки становятся flex-элементами и подчиняются правилам контейнера.

Подробности

• Главная ось: flex-direction: row (по умолчанию) или column. Поперечная ось перпендикулярна ей.
• Выравнивание: justify-content распределяет вдоль главной оси (flex-start, center, space-between, space-around). align-items выравнивает поперёк (stretch, center, flex-start).
• Промежутки: gap: 1rem задаёт интервалы без хитростей с полями.
• Перенос: flex-wrap: wrap позволяет элементам переноситься на следующую строку.
• Рост и сжатие: flex: 1 заставляет элемент занять свободное место, flex: 0 0 200px задаёт фиксированную ширину. Полностью: flex-grow, flex-shrink, flex-basis.
• Центрирование: display:flex; justify-content:center; align-items:center; центрирует потомка по горизонтали и вертикали.
• Когда Grid? Для двумерных сеток (строки и столбцы одновременно) лучше CSS Grid. Flexbox рассчитан на одно направление.

См. также: CSS, медиазапросы