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

Posted 2023-03-05

【中文标题】Flexbox 导航，一些项目在左边，一些项目在右边

【英文标题】：Flexbox navigation with some items are on the left and some items on the right

【发布时间】：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

【参考方案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 中