Как прижать flex-контейнер к правой стороне?

Question

[Владимир]

Доброго времени суток! Вот есть такое меню:

Все пункты меню это li в ul, то есть списком. Вот CSS:

.header-menu
  width: 100%
  display: flex
  margin: 0
  & > li
    display: flex
    justify-content: center
    flex-direction: column
    margin-right: 15px
    margin-left: 15px
    position: relative

Каждый li тоже flex-контейнер получается (если я правильно понимаю). Мне нужно сделать для двух последних так сказать float: right. Но я что то не могу понять как это сделать. ul у меня на всю ширину растянут, то есть куда их двигать места хватает. Пробовал разные justify и align но чего то не получается :(
Подскажите как правильно это реализовать. Заранее спасибо!

Answer 1

[Алексей Бульба]

Банальный margin-left: auto творит чудеса. Привет хитрые моменты из спецификации :)
Вот ваше решение:
https://jsfiddle.net/a0hz7hp1/3/

Comments

[Set_IT]

Не поленился зарегистрироваться чтобы лайкнуть)) Отлично помог!

Answer 2

[Артём Ведищев]

А может сделать так
https://jsfiddle.net/a0hz7hp1/1/

Answer 3

[Владимир]

Так как у меня нету рамок вокруг элементов я сделал так https://jsfiddle.net/8dutoskn/

Answer 4

[Anton fon Faust]

Во-первых, это не css, а scss.
Во-вторых, возьмите уже скомпилированный css и посмотрите, что у вас за стили к чему применяются.

Comments

[Владимир]

Anton fon Faust если дело пошло так то во-первых это не scss а sass, во-вторых зачем мне смотреть в уже скомпилированный css если я пытаюсь сделать что то, а не разобраться что к чему применяется. Пожалуйста внимательнее читайте вопрос.

[Владимир]

Anton fon Faust P.S. "Вот CSS:" в вопросе я написал образно, потому как там и так все понятно вне зависимости в каком виде я его выложу.