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

Question

使用CSS flex我试图让所有内联元素居中,除了一个内联元素在右边对齐.我不想扩大盒子的大小或改变与垂直轴有关的任何东西.我无法获得这个CSS Flexbox生成器可以自己生成的任何东西.如果我添加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>