Flexbox水平菜单居中，同时将最后一个元素保持在右侧[重复]答案

【问题标题】：Flexbox horizontal menu centering while keeping last element to the right side [duplicate]Flexbox水平菜单居中，同时将最后一个元素保持在右侧[重复]
【发布时间】：2019-01-25 15:34:34
【问题描述】：

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

这是一个架构：

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

我有一个“hack”解决方案：将最后一个元素的不可见副本（可见性隐藏）放在菜单的居中部分之前，并将其 margin-right 设置为 auto。

有更好的免破解解决方案吗？

这是一个代码示例：

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

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

谢谢！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

还给#menu 一个左边距auto。

堆栈sn-p

#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>

如果您希望#menu 在其父级的精确中间，我们可以通过添加一个伪来匹配#last。

flex: 1 然后将占用所有可用空间，并将#menu 推到中间

堆栈sn-p

#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;
}

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

【讨论】：