居中弹性项目，在行尾有一个

Question

我正在用 flexbox 创建一个导航栏。这是我的 html ：

 <div class="container">
    <div>Project</div>
    <div>About the Project</div>
    <div>Contact Us</div>
    <div>Mailbox</div>
</div>

还有我的 css ：

 .container {
  display: flex,
  justify-content: center
}

这是它目前的样子：

我希望 mailbox div 位于 flex container 的末尾。我希望它看起来更像这样。

我已经在该 flex 项目上尝试了 flex-end 无济于事。我需要做什么才能做到这一点？

原文由 jhamm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

布局可以通过 flex auto 边距和一个不可见的 flex 项目来实现。

 .container {
  display: flex;
}
.container > div:first-child {
  margin-right: auto;
  visibility: hidden;
}
.container > div:last-child {
  margin-left: auto;
}

 <div class="container">
  <div>Mailbox</div><!-- invisible flex item -->
  <div>Project</div>
  <div>About the Project</div>
  <div>Contact Us</div>
  <div>Mailbox</div>
</div>

jsFiddle

笔记：

• Flex auto 边距 用于对齐 flex 项目。
• 由于 flexbox 对齐通过分配容器中的可用空间来工作，因此添加了一个不可见的 flex 项目以在两侧创建相等的平衡。
• 重要的是虚拟项目与最后一个项目（邮箱） _的宽度完全相同_。否则，不会有均等的平衡，中间的项目也不会完全居中。

在此处了解更多信息： 对齐 Flex 项目的方法

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加 margin-left: auto; 在你的 last-child container div 我在这里做以下方式：

 .container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  /* width: 100%; */
  height: 50px;
  background: #333;
  padding: 15px;
  color: #ddd;
  padding: 10px;
}
.container> .leftone {
  margin-left: 20px;
}
.container div:last-child {
  margin-left: auto;
}

 <div class="container">
  <div class="leftone">Project</div>
  <div class="leftone">About the Project</div>
  <div class="leftone">Contact Us</div>
  <div>Mailbox</div>
</div>

工作小提琴

原文由 Chonchol Mahmud 发布，翻译遵循 CC BY-SA 3.0 许可协议