CSS Flexbox教程--如何建立一个固定的侧面和底部导航栏

迪鲁宾
581 阅读3分钟

Flexbox可以帮助你简化创建基本和高级布局的过程。而用CSSflexbox 或Grid 来创建侧面和底部的导航菜单也是相当直接的。

这些布局是如此受欢迎，以至于它们几乎在网络上到处出现。例如，请看Twitter的侧边栏，这篇文章的灵感就来自于此:

通常情况下，要用CSS创建一个固定的菜单，你必须使用position 属性，其值为fixed 或sticky 。

这种方法的问题是，它将整个元素从文档流中移除，就像它根本不存在一样。对于初学者，有时甚至是专家，这是CSS中令人沮丧的时刻之一。

在本教程中，你将学习如何用CSSflexbox 来创建一个固定的侧边栏和固定的底部导航菜单。我将把所有的代码和演示放在Codepen上，这样你就可以看到我们要建立的东西的实时预览。

开始吧

要用Flexbox创建一个固定的元素，你首先需要在你想要固定的项目的父元素上禁止滚动。在我们的例子中，父元素是body:

body {
    overflow: hidden;
    height: 100vh;
}

标记

div 我们将使用HTML创建一个两栏布局，并将其包裹在一个名为wrapper:

<body>
<div class="wrapper">
  <aside>
    <ul>
      <li>Item</li>
      ...
    </ul>
  </aside>
  <main>
    <div class="wrapper_inner">
      <p>
        ...  
       </p>
     </div>
   </main>
 </div>
</body>

CSS

为了使侧边栏固定，我们只需要在父元素body 上禁止滚动，并使main 元素可以滚动:

body {
  overflow: hidden;
  height: 100vh;
}
main {
  overflow-y: auto;
}
aside {
  flex: 1 0 10%;
}
.wrapper {
  display: flex;
  height: 100%;
}

让我们把这个代码分解一下。

首先，我们用这段代码使body 不可滚动并隐藏了滚动条:

body {
    overflow: hidden;
}

然后使用overflow: auto ，我们将滚动条重新添加到main 元素中。

最后，我们创建了一个灵活的容器wrapper ，并使用height: 100% ，给它一个与父元素相同的高度:

.wrapper {
    display: flex;
    height: 100%;
}

如何使之成为移动友好型

但在宽度小于500px 的移动屏幕上，我们希望侧边栏固定在底部或顶部，视情况而定。要做到这一点，你需要添加以下CSS:

@media (max-width: 500px) {
  .wrapper {
    flex-direction: column-reverse;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}

在移动屏幕上，我们把我们的柔性包装器的方向改为列而不是行。然后，为了使它固定在底部，我们添加以下内容:

.wrapper {
    flex-direction: column-reverse;
}

另一方面，要使它固定在顶部，你只需删除column-reverse ，并像这样把它改为column:

.wrapper {
    flex-direction: column;
}

你可以在下面用Codepen创建的笔中看到一个实时预览。你可以调整窗口的大小以看到固定的底部导航。

结论

在本教程中，你学到了如何用flexbox 创建一个响应式的固定侧边栏。 这里有一些重要的步骤需要记住:

  1. 要想用flexbox固定一个元素，你必须先在父元素上禁用滚动功能。overflow: hidden
  2. 然后你需要创建一个高度等于父元素的柔性容器。
  3. 在你不希望固定的元素上添加overflow: auto 。

这样就可以了,哦，编码愉快

avatar
文章
阅读
粉丝