CSS Flexbox导航栏右对齐

Question

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

就像是：

[首页]-[资料] ------------ [学分]-[关于]

这是我尝试实现的目标：

基本上，这个想法是将两个flexbox合并为一个并将正确的flexbox设置为：

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

这是一个好方法吗？还是我正在使用一些骇人听闻的方式？

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>