Css Flexbox Navbar Right Align

Question

basically what I am trying to do is to implement a navigator in css without using float/clearfix. Instead I am using a better approach, css3's flexbox. I know it's simple to align items to the left easily but what's the optimal solutions for having a narbar which has two aligned regions ?

Something like:

[Home]-[Stuff]------------[Credits]-[About]

This was my attempt implementing this:

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

Basically the idea is to wrap two flexboxes into one and set the right flexbox to:

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

Is this a good way to do it ? Or I am using some hacky way ?

Answer 1

Your way is not a bad one. However, using nested elements may be unnecessary.

.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>