问题标签 [angular-flex-layout]

我尝试在我的应用程序中使用 2.0.0-beta.9，一个简单的测试不起作用

显示列而不是行

我想我正在正确导入库

Angular flex-layout是否可以在包装器上应用响应式api而不是在整个屏幕上？

如果我有代码：

只有当整个屏幕变小时，Flex 方向才会改变。main-wrapper有什么方法可以在很小而不是屏幕时更改 flex 方向？

如果不使用 flex 布局，是否可以使用 css 来完成？

我正在为 Angular 2 使用 Material design，我刚刚开始，我正在尝试使用MdMenu以便在屏幕尺寸较小时显示菜单。我的问题是菜单始终保持打开状态，从不关闭，我不明白它是如何工作的。在我第一次体验 Material design 时，我也在为 Angular 2 使用Flex-Layout。

这是我的代码

app-container.component.html

应用容器.component.ts

应用容器.module.ts

应用容器.component.scss

这是我单击菜单按钮时的结果，然后单击各处以关闭它（但它仍然处于打开状态）：

当我点击小屏幕上的按钮时的图像

在我单击并放大视口后

我在 Google Chrome 版本 61.0.3163.100 上测试它

我是 Angular Flex-layout API 的新手，我有一个基本问题：

Bootstrap 4 的 .container 类如下：

如何在不使用任何 CSS 的情况下使用纯 Angular Flex-Layout API 实现相同的行为？

我可以使用打开的属性或 open() 方法和 flex-layout 响应式 api 使我的 mat-sidenav 响应吗？喜欢<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">

我试图让这些内部卡片填充它们的高度，我觉得我没有正确使用 flex 布局。

在我的项目中安装了材质 flex 布局，但我无法在 @node_modules 中看到该文件，并且它无法正确渲染 flex 布局 css。

下面是我遵循的代码，请提出这里缺少的任何内容。

已安装

导入的 app.components.ts

在 app.moduel.ts 中导入

节点：安装版本

以供参考

我最近第一次开始使用 angular/flex 并且不确定布局容器嵌套。在下面的代码中，导航标签是一个角材料侧边导航，它在左侧打开，然后将其余内容推到右侧。我注意到此时（当我刚开始时它不是这样的）sidenav 最近在我打开/关闭它时似乎有点滞后。它在动画中途冻结几秒钟，然后完全打开/关闭。我在一行 fxLayout 容器中嵌套了列和更多行 fxLayout 容器，并认为这可能是 sidenav 动画性能问题的原因？我是否通过嵌套所有这些导致性能问题的容器使事情变得过于复杂？

我的代码：

我正忙于一个使用 angular-flex-layout 的项目。据我了解，如果将 fxLayoutWrap 属性应用于容器，则 flex 容器应该换行到下一行。出于某种原因，我有一个非常小的 x 溢出。它曾经更大，然后我删除了两个 fxLayout 行容器上的一些 fxLayoutGaps，这使它变得更好。我不知道这可能是什么原因，因为我将 fxLayoutWrap 属性应用于父（仪表板组件的第一行）行容器。知道我做错了什么吗？

向右滚动后的页面图片

https://imgur.com/a/Ga4UR

以及向右滚动之前的图片：

https://imgur.com/CWyWO4T

我的代码：

我的家庭组件的html：

我的仪表板组件的 html（这是主组件中路由器插座的默认路由）

我的样式.css：

我的仪表板组件的 css：

我想在页面中心显示卡片。当我将类进度向导放在一个单独的 div 中时，如下所示。

CSS：

这样，不继承父 div 高度的第二个 div 和卡片未居中对齐。我想知道 flex 布局是如何工作的以及对此的正确解决方案？

谢谢。