CSS Flexbox导航栏右对齐

Question

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

就像是：

[首页] - [东西] ------------ [积分] - [企业]

这是我尝试实现的目标：

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

基本上，这个想法是将两个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>