如何将简单的 CSS grid 转换成 Flexbox 版本没有奇怪的效果
How to convert simple CSS grid into Flexbox version without strange effect
我正在尝试获得类似于 https://material.angular.io 的页面布局。我使用 angular/flex-layout 创建了一个组合的 flexbox/grid 布局，效果非常好。最里面的容器（导航和内容）被放置在 CSS 网格内，但由于它基本上只用作二维容器，我想我可以很容易地用 column-flexbox 替换那个。但只有这样才会在向下滚动时产生这种奇怪的效果：
左侧的导航框应该是粘性的，不会被推到标题工具栏下方。
这种布局可以只用flexbox吗？
看起来某些 angular/flex-layout 属性与某些 CSS 样式配置错误。我重新开始并设法创建了一个对 CSS Grid 和 Flexbox 表现相同的版本：
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
第二个工具栏中有一个按钮，可让您在 CSS 网格和 flexbox 版本之间即时切换。
我正在尝试获得类似于 https://material.angular.io 的页面布局。我使用 angular/flex-layout 创建了一个组合的 flexbox/grid 布局，效果非常好。最里面的容器（导航和内容）被放置在 CSS 网格内，但由于它基本上只用作二维容器，我想我可以很容易地用 column-flexbox 替换那个。但只有这样才会在向下滚动时产生这种奇怪的效果：
左侧的导航框应该是粘性的，不会被推到标题工具栏下方。
这种布局可以只用flexbox吗？
看起来某些 angular/flex-layout 属性与某些 CSS 样式配置错误。我重新开始并设法创建了一个对 CSS Grid 和 Flexbox 表现相同的版本：
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
第二个工具栏中有一个按钮，可让您在 CSS 网格和 flexbox 版本之间即时切换。