Html 创建中间带有徽标的flexbox导航栏，并在左侧和右侧列出项目

我已经有好一阵子不停地用头撞这个了。我以为这很简单，但是。。。不是

我的思维过程和代码

HTML

      <nav className="navbar">
        <div className="left">
          <ul>
            <li>HOME</li>
            <li>ARTISTS</li>
            <li>MEDIA</li>
          </ul>
        </div>
        <div className="center">
          <img src={logo} alt="" />
        </div>
        <div className="right">
          <ul>
            <li>MERCHANDISE</li>
            <li>FAMILY</li>
            <li>CONTACT</li>
          </ul>
        </div>
      </nav>
    </div>

基本上，中间的标志永远都不是完美的中心。不管我做什么。当然，我可以增加一些额外的边距使其居中，但这只是在以后增加一些问题

右边的项目，类名为“right”，也被推到右边，因为单词的长度不同

我想知道flexbox是否是这样一个简单导航条的选择

在React中，这被包装在一个div中的事实是否也会造成混乱？虽然它没有特定的类

似乎我在网上找到的所有东西要么是引导解决方案，要么是一种完全不同的方式，一旦你选择了不同的菜单项，就会弄乱整个导航栏

---

提前谢谢。

你走对了路

尝试：

---

我给了导航一个宽度：100%；因此flex:1可以占用尽可能多的空间

实际上这很简单，请遵循以下步骤：

常量应用==>{ 回来 家 艺术家 媒体 商品 家庭 联系 } ReactDOM.render，document.getElementById'root' navbar先生{ 显示器：flex； 证明内容：周围的空间； 对齐项目：居中； } .名单{ 显示器：flex； 填充：0； 列表样式：无； 保证金：25雷姆； } 李先生{ 填充：.25rem } /*让它反应灵敏*/ @介质最大宽度：575.98px{ navbar先生{ 弯曲方向：立柱； } .名单{ 弯曲方向：立柱； 文本对齐：居中； } }

---

由于某些原因，中间的徽标仍然没有完全居中。要清楚的是，它是一个没有边距的.png文件，所以它应该完全居中。logo应该是一个特定的尺寸吗？那是因为它取决于左右宽度，我想在这种情况下，position:absolute可能更好。我没有改变任何东西，这就是结果：position absolute在img标签上，你的意思可能是？只是将徽标放在横幅图像的前面，但由于某些原因仍然没有完全居中。。。谢谢你在任何情况下对正常运行的帮助。啊，我明白了，你是说图像容器不居中？如果是这样，您可能需要设置包裹导航的div的宽度。看看这个

$black: #000;
$white: #fff;

html,
body {
  background-color: $black !important;
  color: $white;
  font-family: Helvetica;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  display: inline;
  padding: 5px;
}

.navbar {
  display: flex;
  text-align: center;
  justify-content: space-between;
}

.left {
  display: flex;
  width: 200px;
}

.center {
  display: flex;
  justify-content: flex-start;
  width: 120px;
}

.right {
  display: flex;
}

.image-container {
  display: flex;
  justify-content: center;
}

    nav {
        display: flex;
        width: 100%;
        text-align: center;
    }
    .center, .left, .right {
        flex: 1;
    }
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    nav ul li {
        display: inline;
        padding: 30px;
    }