Навигация по Flexbox с некоторыми элементами слева и некоторыми пунктами справа

Question

Я пытаюсь создать базовую навигацию, где некоторые из ссылок расположены слева, а некоторые из них справа. Изучая некоторые из ответов здесь, я нашел решение ниже в jsfiddle. Но у них так много места. Я просто хочу, чтобы у самых левых и самых правых предметов было очень мало места между собой, и в центре должен быть огромный разрыв.

HTML:

<ul class="main-nav"> 
    <li class="left"><a class="links-main" href="#">Left1</a></li> 
    <li class="left"><a class="links-main" href="#">Left2</a></li> 
    <li class="left"><a class="links-main" href="#">Left3</a></li> 

    <li class="right"><a class="links-main" href="#">Right1</a></li> 
    <li class="right"><a class="links-main" href="#">Right2</a></li> 
    <li class="right"><a class="links-main" href="#">Right3</a></li> 
    <li class="right"><a class="links-main" href="#">Right4</a></li> 

</ul> 

CSS:

ul.main-nav { 
    display:-webkit-flex; 
    display:flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    justify-content: flex-start; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li.left 
{ 
    margin-right: auto; 
} 

li.right 
{ 
    margin-left: auto; 
} 

.links-main { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

JsFiddle

Answer 1

Добавить margin-left: auto к первому right элементу только - см демонстрационная ниже:

ul.main-nav { 
 
    display:-webkit-flex; 
 
    display:flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
/* 
 
li.left 
 
{ 
 
    margin-right: auto; 
 
} 
 

 
li.right 
 
{ 
 
    margin-left: auto; 
 
} 
 
*/ 
 
li.left + li.right { 
 
    margin-left: auto; 
 
} 
 

 
.links-main { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}

<ul class="main-nav"> 
 
    <li class="left"><a class="links-main" href="#">Left1</a></li> 
 
    <li class="left"><a class="links-main" href="#">Left2</a></li> 
 
    <li class="left"><a class="links-main" href="#">Left3</a></li> 
 
    
 
    <li class="right"><a class="links-main" href="#">Right1</a></li> 
 
    <li class="right"><a class="links-main" href="#">Right2</a></li> 
 
    <li class="right"><a class="links-main" href="#">Right3</a></li> 
 
    <li class="right"><a class="links-main" href="#">Right4</a></li> 
 

 
</ul>