CSS Flex导航栏logo居左、导航链接居右布局实现问题

问题现状 #

当前代码已经通过flex布局的align-items: center解决了logo与导航文字垂直居中的问题，尚未实现左右分布效果，存在两个可优化点：

• nav容器设置了justify-content: center，强制所有子元素居中排列
• 未利用flex布局的空间分配规则分隔左右区块
• 现有HTML中两个导航链接重复使用id="nav_a"，不符合HTML规范（id需全局唯一，统一样式建议使用class）

最小改动方案 #

不需要调整现有HTML结构（仅修正重复id的规范问题），只需要修改CSS即可实现效果：

1. 移除nav选择器中的justify-content: center属性
2. 给logo图片添加margin-right: auto规则，自动占据logo右侧所有剩余横向空间，将后续导航链接推至导航栏最右侧

最终代码 #

CSS部分 #

nav {
  overflow: hidden;
  display: flex;
  padding: 20px 15px;
  color: #344E41;
  align-items: center;
  /* 移除原有的 justify-content: center */
}

/* 新增logo右外边距规则 */
nav img {
  margin-right: auto;
}

nav a {
  color: #344E41;
  text-decoration: none;
  margin: 0 20px;
  transition: 0.5s;
}

nav a:hover {
  opacity: 75%;
}

HTML部分 #

<nav>
  <img src="assets/img/big_logo_black.png" height="50px">
  <!-- 重复id替换为class，符合规范 -->
  <a class="nav_a" href="#link1">link1</a>
  <a class="nav_a" href="#link2">link2</a>
</nav>

原理说明 #

flex布局中，给子项设置margin: auto会自动吸收对应方向的所有剩余空间：给logo设置margin-right: auto后，logo右侧的剩余空间会全部被该外边距占据，后续的导航链接自然会被顶到容器最右侧，同时保留已经实现的垂直居中效果。
这种写法不需要额外给导航链接套一层父容器，是当前结构下改动量最小、兼容性最好的实现方式，支持所有现代浏览器。

内容的提问来源于stack exchange，提问作者Otryks