Поместите два последних гибких элемента в конце контейнера

Question

У меня есть компонент заголовка Tabs, и мне нужно расположить два последних элемента справа.Мой код выглядит следующим образом:

li:nth-last-child(1),
  li:nth-last-child(2) {
    color: #c2c2c2;
    margin-left: auto;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

Последний элемент (1) выровнен до конца, но второй элемент (2) расположен близко к центру контейнера.Есть ли лучший способ исправить это, используя этот подход?

Answer 1

Применить margin-left: auto; только на li:nth-last-child(2).margin-left: auto; толкает предмет и следующие справа.Вот краткая статья о сгибах и полях.

Обновленный код:

li:nth-last-child(1),
li:nth-last-child(2) {
    color: #c2c2c2;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

li:nth-last-child(2) {
    margin-left: auto;
}