CSS Flex весь центр, кроме одного правого элемента с выравниванием по горизонтали

Question

Использование CSS flex Я пытаюсь получить все встроенные элементы по центру кроме один встроенный элемент для выравнивания справа. Я не хочу расширять размер ящиков или менять что-либо по отношению к их вертикальной оси. Я не смог получить больше, чем этот CSS Flexbox generator может производить самостоятельно. Если я добавлю margin-left на последний элемент, тогда все остальные элементы выравниваются влево. После этого, если я добавлю margin-left: auto; и margin-right: auto; ко всем остальным элементам, которые они распространяют. Тот факт, что различие между горизонтальным и вертикальным не помогает.

Как сохранить первые три элемента, которые останутся сгруппированными и центрированными, и только изменить горизонтальную компоновку последнего элемента для выравнивания вправо? Я бы предпочел, чтобы иметь возможность по-прежнему использовать margin-right: 2px;, чтобы не иметь его immediantly против границы .parentNode.parentNode

<header> 
<span>Item 1</span> 
<span>Item 2</span> 
<span>Item 3</span> 
<span>Item 4</span> 
</header> 

Визуальная демонстрация того, что я пытаюсь достичь:

Answer 1

Вы может использовать абсолютное позиционирование.

header { 
 
    display: flex; 
 
    justify-content: center; 
 
    border: 1px solid black; 
 
} 
 
span { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
span:last-child { 
 
    position: absolute; 
 
    right: 2px; 
 
}

<header> 
 
<span>Item 1</span> 
 
<span>Item 2</span> 
 
<span>Item 3</span> 
 
<span>Item 4</span> 
 
</header>