如何用Flexbox布局实现分割式菜单导航？

我的页面header仅包含<nav>元素，想仅通过Flexbox实现一种菜单布局（Logo居左，中间三个菜单项居中，最后两个菜单项居右）。目前我用display: inline-block加float实现了该效果，但想改用Flexbox方案。尝试过给Logo设置margin-right: auto让它左对齐，但给最后两个菜单项加margin-left: auto没法让它们相邻，求解决方法。

原代码如下：

原HTML代码 #

<header>
<nav>
  <ul>
    <li class="left">Logo</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="right">Item 5</li>
    <li class="right">Item 4</li>
  </ul>
</nav>
</header>

原CSS代码 #

body {
  max-width: 950px;
  margin: 0 auto;
}

header {
  padding: 30px 10px;
  border-bottom: 1px solid grey;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav ul li {
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-left: 10px;
}

Flexbox实现方案 #

核心思路是利用Flexbox的margin: auto特性分配容器剩余空间，以下提供两种可行方案：

方法一：不修改HTML结构，通过margin分隔 #

不给右侧菜单项单独设置margin-left: auto，而是给中间区域的最后一个菜单项（Item 3）添加margin-right: auto，让Logo自动左对齐、中间项居中、右侧两项自然右对齐：

body {
  max-width: 950px;
  margin: 0 auto;
}

header {
  padding: 30px 10px;
  border-bottom: 1px solid grey;
}

nav ul {
  list-style-type: none;
  /* 启用Flexbox布局 */
  display: flex;
  align-items: center;
  gap: 10px; /* 统一控制菜单项间距，替代传统margin */
}

/* 关键：给中间最后一个菜单项设置margin-right: auto，分配剩余空间 */
nav ul li:nth-child(4) {
  margin-right: auto;
}

.right {
  /* 若需要单独调整右侧项间距，可保留此样式，否则用gap统一控制即可 */
  /* margin-left: 10px; */
}

方法二：调整HTML结构，将右侧菜单项分组 #

把两个右侧菜单项放在同一个<li>容器内，只需给该容器设置margin-left: auto就能让整个组右对齐，逻辑更清晰：

修改后的HTML

<header>
<nav>
  <ul>
    <li class="left">Logo</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="right-group">
      <span>Item 5</span>
      <span>Item 4</span>
    </li>
  </ul>
</nav>
</header>

修改后的CSS

body {
  max-width: 950px;
  margin: 0 auto;
}

header {
  padding: 30px 10px;
  border-bottom: 1px solid grey;
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo左对齐 */
.left {
  margin-right: auto;
}

/* 右侧组整体右对齐 */
.right-group {
  margin-left: auto;
  display: flex;
  gap: 10px; /* 控制右侧内部菜单项间距 */
}

补充说明 #

• Flexbox中margin: auto会自动填充容器的剩余空间，通过在关键位置设置该属性，可轻松实现元素的左、中、右分布。
• 使用gap属性控制元素间距，比传统margin更简洁，且不会出现布局溢出或间距计算错误的问题。

内容的提问来源于stack exchange，提问作者Tomáš Harvánek