CSS弹性盒子所有元素居中，除了单个向右水平对齐的元素

Question

使用CSS Flexbox，我正在尝试使所有内联元素居中对齐，除了一个内联元素需要右对齐。我不想扩展盒子的大小或更改与它们的垂直轴有关的任何内容。我无法比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>

我想要实现的可视化演示：

- John

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>

- Michael Coker

---

若在这里使用“absolute”，则会出现重叠。 - Mladen Janjetovic