Sass 如何使用角材质7实现两级应用程序布局？

我正在尝试让我的应用程序的外观和行为与Angular Material网站相似：

我已经克隆并在本地运行了它，但我正在努力找出我需要应用于哪些元素的正确样式（我不想只是复制该项目的所有内容，我宁愿学习如何实现我想要的，这样我就可以将其应用于其他一些项目）。我已经使用Chrome开发工具检查了元素和样式，但我无法在下面的Stackblitz示例中再现所有元素和样式：

我在Stackblitz上启动了一个项目，只需克隆Sidenav示例并添加我自己的主工具栏：

我的主要目标：

• 内容滚动条不应覆盖宽屏幕上的主工具栏，但允许在较小屏幕上覆盖主工具栏
• 调整大小时保持主工具栏和辅助工具栏“连接”（宽度小于600px）
• 对于宽屏幕：
  • 固定侧导航（在盒子中）
  • 侧导航内容的窄滚动条

是否建议使用flexbox来布局整个应用程序？是否可以使用flexbox按预期放置滚动条

更新：

最终版本：

帮助我实现目标的资源：

---

好吧，我试着复制导航栏，类似于Angular Material的网站

页面内容与主工具栏和侧导航分开。 页面的垂直滚动与侧边菜单不同，不会影响主工具栏。 页面的内容是通过

所有这些都是用Flex布局完成的。 我希望这对你有帮助

演示：

---

关于stackblitz上的代码，您可以在当前CSS中添加以下代码：

@介质（最大宽度：600px）{
.主工具栏{
位置：静态！重要；
}
.示例容器{
位置：静态！重要；
}
}

---

您可以在

上阅读更多关于CSS中的

@media

queris的信息，这确实帮了大忙。我之前试过Flex布局，但忘了它，这让我更容易。