Flexbox水平菜单居中，同时将最后一个元素保持在右侧

Question

我正在尝试使用flexbox水平居中菜单，但最后一个元素位于网站的右侧。

这是一个架构：

我已尝试在最后一个元素上将margin-left设置为auto，但它将居中菜单发送到左侧。将margin-right设置为自动菜单不起作用。

我有一个＆＃34; hack＆＃34; -solution：在菜单的居中部分之前放置最后一个元素的隐藏副本（隐藏可见性），并将其margin-right设置为auto。

任何更好的无黑客解决方案？

以下是代码示例：

＆＃13;

＆＃13;

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#last {
  margin-left: auto;
}

＆＃13;

<div id="container">
  <div id="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div id="last">
    4
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

也#menu左边距auto。

Stack snippet

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#last, #menu {
  margin-left: auto;
}

#last span, #menu span {
  padding: 10px 20px;
  background: lightgray;
}

<div id="container">
  <div id="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div id="last">
    <span>4</span>
  </div>
</div>

如果您希望{{1>}位于其父级的完全中间，我们可以通过添加一个伪来匹配#menu来实现。

#last将获取所有可用空间，并将flex: 1推到中间

Stack snippet

#menu

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#last, #container::before {
  content: '';                /*  for the pseudo to render  */
  flex: 1;                    /*  take all space left, equally  */
  text-align: right;
}

#last span, #menu span {
  padding: 10px 20px;
  background: lightgray;
}