Flexbox — современный способ расположить элементы в строку или столбец и управлять расстояниями между ними. Включается на контейнере:
.menu { display: flex; gap: 16px; /* промежуток между элементами */ justify-content: space-between; /* распределение по горизонтали */ align-items: center; /* выравнивание по вертикали */ }
• display: flex превращает контейнер во «флекс»; его прямые дети становятся гибкими элементами. • justify-content управляет размещением вдоль основной оси (center, space-between, flex-start). • align-items — поперёк (center, stretch). • flex-direction: column ставит элементы в столбец.
Flexbox идеален для меню, панелей, карточек в ряд и центрирования — это первый инструмент раскладки, который стоит освоить.