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屋!