使用 flexbox 时如何制作固定导航栏？答案

【问题标题】：How to make a fixed navbar while using flexbox?使用 flexbox 时如何制作固定导航栏？
【发布时间】：2018-02-14 21:20:57
【问题描述】：

我想创建一个固定的导航栏，我知道我肯定需要使用 position:fixed; 但是由于我之前使用了 display:flex，所以一旦我使用 position:fixed，flex 就不起作用了。

哪位朋友有好的解决办法？

<nav class="MyBlog-menu">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">Python</a></li>
        <li><a href="">TECH</a></li>
        <li><a href="">OTHER</a></li>
    </ul>
</nav>

CSS：

.MyBlog-menu{
    display: flex;
    align-items: center;
    flex:1;
    justify-content: center;
    background-color: #98eebc;
    opacity:0.7;
    filter:alpha(opacity=70);
    border-radius: 4px;
    position: relative;
 height: 40px;
}
.MyBlog-menu ul{
    display: flex;
    justify-content: space-between;
    flex:0.33;
    list-style: none;
}
.MyBlog-menu ul li {
border-radius: 7px}

.MyBlog-menu ul li a{
    text-decoration: none;
    color: #4c4c4c;
}

【问题讨论】：

flex 与容器元素的定位无关......只需正确使用它......添加 position:fixed 和 width:100% 以及 top:0 left:0

标签： css menu flexbox position navbar

【解决方案1】：

使用position: fixed 和display: flex 完全没问题。

我怀疑当您添加position: fixed; 时，它会导致nav 的大小发生变化。这是因为当应用position: fixed 时，它会将元素从文档流中取出。这意味着您需要明确定义nav 元素的大小。

html,
body {
  padding: 0;
  margin: 0;
}

.MyBlog-menu {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  background-color: #98eebc;
  opacity: 0.7;
  filter: alpha(opacity=70);
  border-radius: 4px;
  position: fixed;
  width: 100%;
  height: 40px;
}

.MyBlog-menu ul {
  display: flex;
  justify-content: space-between;
  flex: 0.33;
  list-style: none;
}

.MyBlog-menu ul li {
  border-radius: 7px
}

.MyBlog-menu ul li a {
  text-decoration: none;
  color: #4c4c4c;
}

<nav class="MyBlog-menu">
  <ul>
    <li><a href="">HOME</a></li>
    <li><a href="">CSS</a></li>
    <li><a href="">Python</a></li>
    <li><a href="">TECH</a></li>
    <li><a href="">OTHER</a></li>
  </ul>
</nav>

<main>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content
</main>

【讨论】：

哦，这一切都以斜线结尾 :)

【解决方案2】：

当您将position:fixed 添加到.MyBlog-menu 时，元素的上下文会发生变化。它现在有点漂浮在其他内容之上，并且失去了它的“整页”宽度和位置。您可以使用属性top, bottom, left, right 重新定位菜单。

有关 CSS 中位置属性的更多信息，请查看以下站点：https://cssreference.io/property/position/

结果，如果您想保持示例中的间距，您可以执行以下操作：

.MyBlog-menu{
    display: flex;
    align-items: center;
    flex:1;
    justify-content: center;
    background-color: #98eebc;
    opacity:0.7;
    filter:alpha(opacity=70);
    border-radius: 4px;
    height: 40px;

    left:10px;
    right:10px;
    top:10px;
    position: fixed;
}

https://jsfiddle.net/0bv04rso/5/

【讨论】：