Как сделать flex элемент?

На родительском элементе ставите display: flex, это стартовая точка, без него все остальные свойства просто не сработают, потому что они относятся к flex-контексту.

Определяете направление через flex-direction, по умолчанию row, элементы идут слева направо в ряд, column ставит их друг под другом сверху вниз.

Настраиваете распределение по главной оси через justify-content: значения flex-start, center, flex-end, space-between, space-around и space-evenly дают разные варианты расстановки, самый частый случай это space-between для меню с логотипом слева и кнопками справа.

Настраиваете выравнивание по поперечной оси через align-items, это перпендикулярное направление относительно flex-direction, значение center чаще всего используется для вертикального центрирования содержимого при row.

Если элементов больше чем помещается в ряд и перенос нужен, добавляете flex-wrap: wrap, без этого элементы будут сжиматься до бесконечности вместо переноса на новую строку.

Отдельным дочерним элементам можно задать flex-grow для растягивания на свободное место, flex-shrink для контроля сжатия, и flex-basis как стартовый размер до применения grow и shrink, часто все три пишут сокращённо через свойство flex, например flex: 1 указывает элементу занять всё доступное пространство поровну с соседями.

Для отступов между элементами используйте gap на самом flex-контейнере, это современный и чистый способ, который не требует убирать margin у последнего или первого элемента отдельным селектором.