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

Question

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

我正在尝试创建一个固定的导航栏，其中主页的 logo/link 左对齐，其余链接右对齐。我一直在尝试使用 CSS 样式的 flex-direction:row 和 row-reverse 以及 justify-content: flex-start 和 flex-end 来实现这一点，但收效甚微。

如何使用 flex 实现这种外观？

.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;
}

.rightnav {
  position: absolute;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

<div class="header">

  <header>

    <div class="navcontainer">
      <nav class="fixednav">
        <div class="leftnav"><a href="#">logo</a></div>
        <div class="rightnav"><a href="#" class="rightnav">home</a></div>
        <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
        <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
      </nav>
    </div>

  </header>

</div>

Answer 1

这就是您所需要的：

.fixednav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: lightgray;
}

a:first-child {
  margin-right: auto;
}

<header>
  <nav class="fixednav">
    <a href="#">logo</a>
    <a href="#">home</a>
    <a href="#">profile</a>
    <a href="#">contact</a>
  </nav>
</header>

在此处了解弹性 auto 边距：

Answer 2

从所有子元素中删除 position:absolute;，即 leftnav 和 rightnav。

并让徽标保持在右侧。给它 flex:6 的属性或任何更大的数字。它将推动右侧的其他元素。

.fixednav {
  display: flex;
  flex-direction: row;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: blue;
}

.leftnav {
  line-height: 60px;
  flex: 10;
}

.leftnav>a {
  text-decoration: none;
  color: white;
  padding: 0px 10px;
}

.rightnav {
  line-height: 60px;
  padding: 0px 5px;
}

.rightnav>a {
  text-decoration: none;
  color: yellow;
}

<div class="header">

  <header>

    <div class="navcontainer">
      <nav class="fixednav">
        <div class="leftnav"><a href="#">logo</a></div>
        <div class="rightnav"><a href="#" class="rightnav">home</a></div>
        <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
        <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
      </nav>
    </div>

  </header>

</div>

Answer 3

最简单的方法可能是 "stretch" .leftnav，因此它将 .rightnav 推到右边缘。 flex-grow 规则就是这样做的（我添加了边框，所以很清楚它是如何工作的）：

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

.leftnav {
  flex-grow: 1; /* this is the important bit */
}

/* the rest is just for looks */

a {
  padding: 1em;
}

div {
  border: 1px dotted crimson;
}

<header>
  <nav class="fixednav">
    <div class="leftnav"><a href="#">logo</a></div>
    <div class="rightnav"><a href="#" class="rightnav">home</a></div>
    <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
    <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
  </nav>
</header>

您可以稍微简化 HTML，结果相同：

<header class="fixednav">
    <nav class="leftnav">
        <a href="#">logo</a>
    </nav>
    <nav class="rightnav">
        <a href="#" class="rightnav">home</a>
        <a href="#" class="rightnav">profile</a>
        <a href="#" class="rightnav">contact</a>
    </nav>
</header>

MDN 文章 about flex-grow …
…和 flex - shorthand 对于 flex-grow、flex-shrink 和 flex-basis

Answer 4

我删除了 position: absolute 并在你的 .leftnav 和 .rightnav 中添加了 Width 类:

.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;
}

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

Align logo on the left and navigation links on the right using flexbox

html

css

navigationbar

flexbox