flexbox 可以帮助你简化创建基本和高级布局的过程。使用 CSS flexbox 或 grid 创建侧边和底部导航菜单非常简单。
这些布局非常流行，它们几乎出现在网络上的任何地方。例如，查看 Twitter 的侧边栏，它激发了我写作本文的灵感：
通常，要使用 CSS 创建固定菜单，你必须使用值为 fixed 或 sticky 的 position 属性。
这种方法的问题在于它将整个元素从文档流中取出，就像它根本不存在一样。对于初学者，有时甚至是专家来说，这是 CSS 中令人沮丧的时刻之一。
在本教程中，你将学习如何使用 CSS flexbox 创建固定侧边栏和固定底部导航菜单。我将在 Codepen 上托管所有代码和 demo，以便你可以看到我们将构建的内容的实时预览。
开始
要使用 Flexbox 创建固定元素，你首先需要禁用要固定的项目的父元素上的滚动。在我们的例子中，父元素是 body：
body {
overflow: hidden;
height: 100vh;
}HTML
我们将使用 HTML 创建一个包含在叫作 wrapper 的 div 中的两列布局。
<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 元素。
最后，我们创建了一个 flex 容器 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;
}
}在移动屏幕上，我们将 flex 的方向更改为列而不是行。然后为了使其固定到底部，我们添加以下内容：
.wrapper {
flex-direction: column-reverse;
}另一方面，要使其固定在顶部，你只需删除 column-reverse，并将其更改为 column，如下所示：
.wrapper {
flex-direction: column;
}你可以在下面使用 Codepen 创建的示例中看到实时预览。你可以调整窗口大小以查看固定的底部导航：
总结
在本教程中，你学习了如何使用 flexbox 创建响应式固定侧边栏。以下是一些需要记住的重要步骤：
- 要使用 flexbox 固定元素，你必须使用
overflow: hidden禁用父元素上的滚动 - 然后你需要创建一个高度等于父级的 flex 容器
- 将
overflow: auto添加到你不想固定的元素
就是这样！
如果你发现本教程有用，或者你有任何疑问，请随时在 Twitter 上与我联系（不要忘记点击关注按钮）@sprucekhalifa。
祝你编码愉快！
原文：CSS Flexbox Tutorial – How to Build a Fixed Side and Bottom Navbar，作者：Spruce Emmanuel