Flexbox 导航，一些项目在左边，一些项目在右边答案

【问题标题】：Flexbox navigation with some items are on the left and some items on the rightFlexbox 导航，一些项目在左边，一些项目在右边
【发布时间】：2017-07-01 10:15:35
【问题描述】：

我正在尝试构建一个基本导航，其中一些链接位于左侧，而其中一些位于右侧。通过研究这里的一些答案，我在 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

【问题讨论】：

标签： html css flexbox alignment

【解决方案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>

【讨论】：

另外，li.left + li.right { margin-left: auto; } 并将 html 保留在 OP 中