CSS Flex除单个右水平对齐元素外的所有中心[重复]

Posted 2023-03-05

【中文标题】CSS Flex除单个右水平对齐元素外的所有中心[重复]

【英文标题】：CSS Flex all center except single right horizontally aligned element [duplicate]

【发布时间】：2017-06-20 05:56:45

【问题描述】：

使用 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>

我想要实现的目标的视觉演示：

【参考方案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>

【讨论】：

这里用absolute会有重叠