CSS Flex所有中心除了单右水平对齐元素

Question

使用CSS flex我试图让所有内联元素居中，除了一个内联元素在右边对齐。我不想扩大盒子的大小或改变与垂直轴有关的任何东西。我还没有比CSS Flexbox generator能够产生更多的东西。如果我在最后一个元素上添加margin-left，那么所有其他元素都会向左对齐。在此之后，如果我将margin-left: auto;和margin-right: auto;添加到他们展开的所有其他元素中。水平和垂直之间的区别无效。

如何保持前三个元素保持分组和居中，只更改最后一个要对齐的元素的水平布局？我希望能够继续使用margin-right: 2px;使其无法在.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>