Question

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

我正在尝试创建一个固定的导航栏，其中主页的徽标/链接是左对齐的，其余链接右对齐。我一直试图通过flex使用flex方向的CSS样式来实现这一点：行和行反向，以及对齐内容：flex-start和flex-end几乎没有成功。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

最简单的方法可能是“拉伸”.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 - flex-grow，flex-shrink和flex-basis

Answer 2

以下是您所需要的一切：

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

在此处了解flex auto页边距：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 3

从所有子元素中删除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 4

我删除了位置：绝对并在.leftnav和.rightnav类中添加宽度：

.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对齐左侧的徽标和右侧的导航链接

4 个答案: