Html 使用flexbox对齐左侧的徽标和右侧的导航链接

我的问题是关于使用flex的导航栏样式和布局

我试图创建一个固定的导航栏，其中指向主页的徽标/链接左对齐，其余链接右对齐。我一直在尝试使用flex的CSS样式来实现这一点：flex方向：行和行反转，并验证内容：flex开始和flex结束，但收效甚微

如何使用flex实现这种外观

.header{
显示器：flex；
宽度：100vw；
填充：0；
保证金：0；
}
.固定导航{
显示器：flex；
弯曲方向：行；
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：60px；
背景色：rgba（0,0,0,1）；
}
.左导航{
位置：绝对位置；
弯曲方向：行；
调整内容：灵活启动；
}
.右导航{
位置：绝对位置；
证明内容：柔性端；
弯曲方向：行反向；
}

以下是您所需要的：

.fixednav{
显示器：flex；
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：60px；
背景颜色：浅灰色；
}
a:第一个孩子{
右边距：自动；
}

---

移除

位置：绝对来自所有子元素，即
leftnav
和
righnav

为了使徽标保持在右侧，请执行以下操作。将其属性设置为
flex:6
或任何更大的数字。它将推动右侧的其他元件


.fixednav{
显示器：flex；
弯曲方向：行；
z指数：9999；
宽度：100%；
高度：60px；
背景颜色：蓝色；
}
.左导航{
线高：60px；
弹性：10；
}
.leftnav>a{
文字装饰：无；
颜色：白色；
填充：0px 10px；
}
.右导航{
线高：60px；
填充：0px 5px；
}
.rightnav>a{
文字装饰：无；
颜色：黄色；
}
最简单的方法可能是“拉伸”
.leftnav
，使其将
.righNav
推到右侧边缘。
flex-grow
规则正好做到了这一点（我添加了边框，以便清楚地了解其工作原理）：


.fixednav{
显示器：flex；
弯曲方向：行；
对齐项目：居中；/*垂直对齐链接*/
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：60px；
背景色：rgba（0,0,0,1）；
}
.左导航{
flex grow:1；/*这是重要的一点*/
}
/*剩下的只是为了好看*/
a{
填充：1em；
}
div{
边界：1倍深红色点；
}
我删除了position:absolute，并在.leftnav和.righNav类中添加了宽度：

.header {
  display: flex;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.fixednav{
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 1);
}

.leftnav {
//  position: absolute;
  flex-direction: row;
  justify-content: flex-start;
  min-width: 100px;
  margin-left:5px;
}

.rightnav {
  //position: absolute;
  justify-content: flex-end;
  flex-direction: row-reverse;
  min-width: 100px;
}

您是否想要类似于@BASEERHAIDER的东西，但要在页面的最右边对齐右a href链接。