Html 不确定如何沿主轴单独对齐我的flex项目

因此，我尝试使用flexbox创建导航栏，基本上我希望我的徽标居中，导航栏切换器位于屏幕左侧。 但是，如果我给flex容器的justify content属性的值为center，它将同时居中我的徽标和导航栏切换器

我想知道除了主轴之外，是否还有类似于align self属性的东西？ 所以我可以将我的徽标设置为居中，将导航栏切换器设置为屏幕左侧

以下是我的HTML代码：

<header class="main-navbar">
      <div class="nav-toggler">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="brand">
        <a class="logo-link" href="#">
          <img src="imgs/logo/logo-lightgrey.png" alt="logo-brand-image">
        </a>
      </div>
    </header>

---

使用右边距推送两个子元素：auto

.main导航栏{
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：3.5雷姆；
宽度：100%；
字号：500；
背景色：#000；
}
.导航开关{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：1公厘；
光标：指针；
}
.导航开关跨度{
宽度：1.3rem；
高度：0.17雷姆；
背景：白色；
显示：块；
}
/**/
.导航开关，
.品牌{
右边距：自动；
}

---

使用右边距推送两个子元素：auto

.main导航栏{
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：3.5雷姆；
宽度：100%；
字号：500；
背景色：#000；
}
.导航开关{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：1公厘；
光标：指针；
}
.导航开关跨度{
宽度：1.3rem；
高度：0.17雷姆；
背景：白色；
显示：块；
}
/**/
.导航开关，
.品牌{
右边距：自动；
}

---

我不确定是否有一个纯粹的flex解决方案。您可能需要尝试将

position:absolute

添加到

.nav-toggler

中。这将从整个流程中删除切换开关，并使徽标位于中心而不受影响

.main导航栏{
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：3.5雷姆；
宽度：100%；
字号：500；
背景：黑色；
}
.导航开关{
位置：绝对位置；
左：0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：1公厘；
光标：指针；
左边距：1 em；
}
.导航开关跨度{
宽度：1.3rem；
高度：0.17雷姆；
背景：白色；
显示：块；
}
.品牌img{
显示：block；/*不是必需的，只是添加到垂直对齐图像以供演示*/
}

---

我不确定是否有一个纯粹的flex解决方案。您可能需要尝试将

position:absolute

添加到

.nav-toggler

中。这将从整个流程中删除切换开关，并使徽标位于中心而不受影响

.main导航栏{
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：3.5雷姆；
宽度：100%；
字号：500；
背景：黑色；
}
.导航开关{
位置：绝对位置；
左：0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：1公厘；
光标：指针；
左边距：1 em；
}
.导航开关跨度{
宽度：1.3rem；
高度：0.17雷姆；
背景：白色；
显示：块；
}
.品牌img{
显示：block；/*不是必需的，只是添加到垂直对齐图像以供演示*/
}

尽管您的解决方案在某种程度上使徽标居中，但它并没有完全居中。我希望这个标志正好在中间。虽然，你的解决方案有点中心标志，但它不是完美的中心。我希望这个标志正好在中间。

.main-navbar {
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  font-weight: 500;
}

.nav-toggler {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1rem;
  cursor: pointer;
}

.nav-toggler span {
  width: 1.3rem;
  height: 0.17rem;
  background: white;
  display: block;
}