В этой маленькой статье мы разберем особенности выравнивания элементов внутри flex-контейнера с помощью традиционных и логических отступов.

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

Теперь, мы переместим элемент Menu в крайнее правое положение, для этого идеально подойдет автоотступ. margin-left: auto отправит элемент на необходимую позицию:

Но мы можем так же использовать и логическое свойство margin-inline-start: auto, чтобы изменить направление контента:

Так же, следует учесть, что автоматическое выравнивание с помощью отступов работает как в горизонтальном, так и в вертикальном направлении:

Спасибо за внимание.

Перевод статьи Chris Coyier “How Auto Margins Work in Flexbox”.