Css Flexbox Navbar右对齐

Question

基本上我要做的是在css中实现导航器而不使用float / clearfix。相反，我使用更好的方法，css3的flexbox。 我知道很容易将项目向左对齐，但是有一个具有两个对齐区域的narbar的最佳解决方案是什么？

类似的东西：

[首页] - [东西] ------------ [积分] - [关于]

这是我尝试实现这个目的：

https://jsfiddle.net/asss321/ornontbt/

基本上，我们的想法是将两个flexbox包装成一个，并将右侧的flexbox设置为：

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

这是一个很好的方法吗？或者我使用一些hacky方式？

Answer 1

你的方式并不坏。但是，使用嵌套元素可能是不必要的。

.container {
  display: flex;
  border: solid 1px black;
}
.container > :nth-child(2) {
  margin-right: auto;
}
a {
  padding: 10px;
}

<div class="container">
  <a href="#">Start</a>
  <a href="#">Extra</a>
  <a href="#">Credits</a>
  <a href="#">About</a>
</div>