问题标签 [angular-flex-layout]

我想在中心显示两/三列和多行的卡片。卡片是动态显示的。我希望每行卡片之间有相等的空间。我在我的代码中设置了这个属性 fxLayoutAlign="space-between center"。通过引用此链接https://tburleson-layouts-demos.firebaseapp.com/#/docs。它不会正确显示。行之间没有空格，并且最后一行与列未正确对齐。只有最后一行不与列垂直对齐。当我更改浏览器窗口大小时，对齐也会混乱。这些是我正在使用的版本

我正在尝试让卡片组件达到 100% 的高度，我一定是做错了什么。我已经尝试在 scss 中全局设置，在组件中本地设置，内联，我可以想到的每个 flex 布局组合来实现这一点。告诉我古代功夫大师的方式！

我按照下面的说明安装了 angular Flex-layout，我收到以下未处理的 Promise 拒绝错误：

模板解析错误：无法绑定到“fxFlex”，因为它不是“div”的已知属性。

我用了以下

紧随其后的是 app.module.ts

在我的 html 中：

编辑：在组件代码中添加部分导入

注意：Material 2 相关组件起作用，而不是 flex-layout。不确定我是否需要在组件中导入 flex 相关的东西。

使用angular/flex-layout，我有一个简单的两列布局。

在小型显示器上，我希望列在左下方。

使用 angular/flex-layout 的Responsive APIfxLayout.sm="column" ，我在容器元素上为小屏幕（600px 和 959px 之间）添加了一个断点：

在小屏幕上，左列成为顶行，右列成为底行。

但是，fxFlex="35%"属性fxFlex="65%"仍然有效，因此行重叠。顶行占据了显示高度的 35% ，因为它之前占据了显示宽度的 35% 。

有关问题的示例，请参阅此 Plunker 。请注意，我使用fxLayout.xs断点而不是fxLayout.sm演示问题，因为 Plunker 将显示分成小部分。

fxFlex我可以通过使用响应式 API（即）显式删除来解决此问题fxFlex=""：

请这个 Plunker获取解决方案的示例。

这有两个问题。首先，感觉非常非常hacky。其次，假设我希望小型和超小型显示器具有相同的行为，我最终得到：

除非有任何更简单的方法可以将响应式 API 用于特定维度以下的显示，而不是显式设置断点？

我正在动态显示卡片。例如，每行有 3 张卡片，它们的宽度相等。当我调整浏览器窗口的大小时，卡片的宽度不均匀。一些卡片以不同的宽度尺寸显示。例如，第一行只有一张卡片，第二行有两张宽度不等的卡片。

为了在所有屏幕尺寸上均匀显示，我需要为 flex 布局设置哪些可能的值？

这些是使用的版本

这是示例代码

我正在使用 Angular 4 以及官方的 @angular/material-design 和 @angular/flex-layout API 构建一个 SPA。我想显示一些项目的变量列表 ( app-project-list)，我用 Md-Cards ( app-project-card) 表示。在此页面上可以看到我希望它如何成为的一个完美示例：wo3.com/work 目标是这里有一个响应式卡片列表：

• 在桌面上，它们应该被放置在环绕的行中
• 它们之间应该有一些余量
• 如果列表中的最后一张卡片是该行中唯一的一张，则它应该左对齐
• 在较小的屏幕上，列数应该减少
• 在移动设备上（断点为xs），列表应显示在一列中

这是我到目前为止的代码，它有问题：

问题

• 当在桌面和一行中的所有项目上时，它看起来很好
• 一旦你调整它的大小，最后一个项目就会被包裹在一个新行中并在中心对齐，但我需要这个在行的开头对齐示例
• 当一个或多个项目被包装时，它们不会在第一行下方对齐，而是向右偏移 1em（见第一张图片）
• 当屏幕变小时，卡片不会填满所有可用空间，左右有大量空白

我在这里查看了所有三个类似的问题，但是这些都没有满足要求（请参阅这个 angularJS 问题和这个 angular2 问题）。任何帮助深表感谢！

我们有一个带有 Angular Material 的 Angular 4 应用程序，一旦我们在生产模式下运行网站，它似乎会生成不同的 HTML。我们使用angular/flex-layout进行布局，使用 webpack 进行捆绑等。作为本地和产品差异的示例：

当地的：

产品：

请原谅格式，但正如您所见，这些块中的顶级 div 在不同的环境中分配了不同的类。这个类不是我们的 HTML 中的东西，而是在项目的输出中生成的。任何线索，想法，想法都欢迎在这里，我们对这样的问题真的不熟悉。

编辑：生成这些输出的 HTML：

我用 Angular 和 Flex-Layout 制作了一个应用程序，我使用断点来隐藏导航栏。当它被隐藏时，我需要使用点击事件来显示导航栏。我的代码如下：

断点正常工作，但用于切换导航栏的事件单击不起作用。解决方案是什么？

我有 2 个 DIV 块。一个用于 XS 设备，另一个用于所有其他设备。

现在对于这两个块，子级几乎保持不变（除了 img.class="cursor-pointer"），而父级 (div.class="unselected-artefacts") 的属性会根据设备方向发生变化。

在这种情况下如何去除重复代码并更好地优化它？

更新： md-table 使用似乎导致此问题的 flex 布局指令包装在某些容器中。我正在更新代码以显示这些包装器。具体来说，外部包装器中的 fxLayoutGap 正在破坏应用程序

我在角度 4 中有这个数据表，它显示了数据库中的记录列表。在特定行单击（实际上是单元格单击）时，应用程序旨在显示该行的详细数据（应用程序中的另一个 url）。我试图通过在 md-cells 中使用 routerLink 锚来实现这一点，如下所示：

但是当我尝试这个时，我在浏览器控制台中收到一个奇怪的错误，似乎与我的代码中的任何内容都无关：

好吧，这显然与锚点有关，但是......不知道我是否遗漏了一些概念或什么，而且那里没有很多例子。