Css Flexbox Navbar Right Align

Question

В основном то, что я пытаюсь сделать, это реализовать навигатор в css без использования float/clearfix. Вместо этого я использую лучший подход - flexbox css3. Я знаю, что легко легко выравнивать элементы слева, но каковы оптимальные решения для того, чтобы иметь narbar, который имеет два выровненных региона?

Что-то вроде:

[Главная] - [] ------------ наполнять избирательные урны фальшивыми бюллетенями [Credits] - [О]

Это была моя попытка внедряющих это:

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

в принципе идея заключается в том, чтобы обернуть два flexboxes в один и установить правильный 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>