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

查看：18
本文介绍了Flexbox 水平菜单居中，同时将最后一个元素保持在右侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是一个架构:

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

我有一个hack"解决方案:在菜单的居中部分之前放置最后一个元素的不可见副本(可见性隐藏)并将其边距设置为自动.

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

这是一个代码示例:

#container {显示:弹性；对齐内容:居中；对齐项目:居中；}#最后的 {左边距:自动；}

<div id="菜单"><span>1</span><span>2</span><span>3</span>
<div id="last">4

谢谢！

解决方案

同时给 #menu 一个 auto 的左边距.

堆栈片段

#container {显示:弹性；对齐内容:居中；对齐项目:居中；}#last, #menu {左边距:自动；}#last span, #menu span {填充:10px 20px；背景:浅灰色；}

<div id="菜单"><span>1</span><span>2</span><span>3</span>
<div id="last"><span>4</span>

<小时>

如果您希望 #menu 位于其父项的 exact 中间，我们可以通过添加一个伪代码来匹配 #last.

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

堆栈片段

#container {显示:弹性；对齐内容:居中；对齐项目:居中；}#last, #container::before {内容: '';/* 用于伪渲染 */弹性:1；/* 将所有空间均等地留出 */文本对齐:右；}#last span, #menu span {填充:10px 20px；背景:浅灰色；}

<div id="菜单"><span>1</span><span>2</span><span>3</span>
<div id="last"><span>4</span>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆