Flexbox水平菜单居中，同时保持最后一个元素在右侧 [英] Flexbox horizontal menu centering while keeping last element to the right side

问题描述

以下是一个模式：

我已经尝试将margin-left设置为在最后一个元素上自动运行，但是它将居中的菜单发送到左侧。设置保留权限自动为菜单不起作用。

我有一个黑客的解决方案：放置一个隐藏的副本（可见性隐藏）的最后一个元素在菜单的居中部分之前，将其右侧边距设置为自动。

任何更好的免费解决方案？

这是一个代码示例：

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

 < div id =container> < div id =menu> <跨度大于1< /跨度> <跨度大于2< /跨度> <跨度→3< /跨度> < / DIV> < div id =last> 4< / div>< / div>  

c> auto 。

Stack snippet
$ b

  #container {display：flex; justify-content：center; align-items：center;}＃last，#menu {margin-left：auto;}＃last span，#menu span {padding：10px 20px;背景：lightgray;}  

 < div id =container > < div id =menu> <跨度大于1< /跨度> <跨度大于2< /跨度> <跨度→3< /跨度> < / DIV> < div id =last> <跨度→4< /跨度> < / div>< / div>  

$ b $ hr b

如果你想要 #menu 在父母的确切中间，我们可以通过添加一个伪匹配 #last 。

$ b

flex：1 #menu 推到中间

堆栈片段

#container {display：flex; justify-content：center; align-items：center;}＃last，#container :: before {content：''; / *为伪渲染* / flex：1; / *剩下所有空格，同样* / text-align：right;}＃最后一个跨度，#menu span {padding：10px 20px;背景：lightgray;}

 < div id =container > < div id =menu> <跨度大于1< /跨度> <跨度大于2< /跨度> <跨度→3< /跨度> < / DIV> < div id =last> <跨度→4< /跨度> < / div>< / div>  

I am trying using flexbox to horizontally center a menu but have its last element on the right side of the website.

Here is a schema:

I have tried setting the margin-left to auto on the last element but it sends the centered menu to the left. Setting margin-right to auto for the menu doesn't work.

I have a "hack"-solution: placing an invisible copy (visibility hidden) of the last element before the centered part of the menu and setting its margin-right to auto.

Any better hack-free solution?

Here is a code sample:

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

Thanks!

解决方案

Give also #menu a left margin of 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>

---

If you want the #menu in the exact middle of its parent, we can achieve that by adding a pseudo to match the #last.

The flex: 1 will then take all the available space, and push the #menu to the middle

Stack snippet

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

这篇关于Flexbox水平菜单居中，同时保持最后一个元素在右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！