Html Flexbox导航，有些项目在左侧，有些项目在右侧

我正在尝试构建一个基本的导航，其中一些链接位于左侧，一些链接位于右侧。通过研究这里的一些答案，我在JSFIDLE中找到了以下解决方案。但它们之间的空间太大了。我只想让最左边和最右边的项目之间的空间非常小，中间应该有一个巨大的差距

HTML:

---

仅将

左边距：自动

添加到第一个

右边

元素-请参见下面的演示：

ul.main-nav{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
调整内容：灵活启动；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
/*
李，左
{
右边距：自动；
}
李，对
{
左边距：自动；
}
*/
左+右{
左边距：自动；
}
.links主要{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}

另外，li.left+li.right{margin left:auto；}并将html保留为OP中的格式

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

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;
}