问题标签 [angular-flex-layout]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

435 问题
Newest
Active
Bountied
318
Unanswered
0 投票
2 回答
677 浏览

angular - 将 @angular/flex-layout 导入 Angular 项目后出现错误

我决定使用响应式网格系统@angular/flex-layout而不是 Bootstrap 的。我只是安装了 npm 包并添加到我的AppModule：

但得到这些错误：

包是：

0 投票
2 回答
797 浏览

angular - 如何以响应方式使用 Angular flex 布局扭曲和居中多个 div

如何使用angular/flex-layout在图片中创建效果。我一直在尝试，fxLayoutWrap但它不会产生以下布局 在此处输入图像描述

0 投票
1 回答
2898 浏览

angular - Angular Material 2 - 响应式工具栏

使用 Angular 4 我试图在页面顶部有一个具有以下行为的工具栏：

大屏幕

在左侧显示“主要”-徽标/链接，在右侧显示其他顶部导航链接。

小屏幕

显示居中的“Main”-Logo Link 和左侧的菜单按钮，用于显示 sidenav（如果屏幕很大，则包含在右侧可见的链接）。

笔记：

如果可见，sidenav 不应越过工具栏。

笔记2：

“主”-Logo/Link 的居中应以整个屏幕宽度为中心。它不应该被菜单按钮推到右边。

是）我有的

我挣扎的地方

  • 我不知道如何正确居中“主要”标志/链接
  • 如果我在小屏幕中显示菜单并将布局切换回更大的屏幕，则菜单不会隐藏

任何帮助将不胜感激，所以已经谢谢你了！

0 投票
2 回答
1065 浏览

angular - 角度弹性布局性能

我想用 angular 4 构建一个响应式应用程序。我正在检查一些响应式平台，当然主要选项之一是angular flex-layout。

我用 angular flex-layout 制作了一些测试页面，我看到它不使用 css 媒体查询，所有的监听和响应都是通过 typescript 实现的。

这个事实会导致移动设备/低资源设备的性能问题吗？还有更多的响应框架，例如仅基于 css 的flexbox-grid。从性能的角度来看，使用基于 css 的平台而不是 angular flex-layout 不是更好吗？

0 投票
0 回答
772 浏览

angular - FxLayout - 对齐/均匀包装复选框

我在using中有 7 个用于一周中的几天 ( Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday) 的复选框。fxLayoutrow

它们应该均匀分布，如果宽度变小，我希望复选框换行，而它们应该垂直对齐（考虑到日子的不同长度）。
因此，如果两天在下一行，复选框应与第一行的两天对齐。

这是我目前拥有的（复选框未正确对齐）：

app.component.html

app.component.ts

这里对应的Plunk

你将如何实现我所需要的？

0 投票
1 回答
21780 浏览

angular - 参数 flex-grow 在 fxFlex 指令中如何工作？

我正在尝试使用 angular flex-layout，但我对指令fxFlex有问题，尤其是在 parameter问题上flex-grow。

医生说：

flex-grow：如果有可用空间，定义弹性盒项目应该增长多少（与其他项目成比例）。flex-grow 值覆盖宽度。

所以我认为使用下面的代码，第二个div应该是第二个的两倍并且应该填满空白空间：

但它并没有像我预期的那样工作，我不知道在什么条件下flex-grow使用了这个参数？

这是我一起工作的笨蛋。

0 投票
1 回答
1789 浏览

angular - 如何将角度材质字段设置为宽度：100%？

我应该如何将表单字段设置为最大宽度，屏幕尺寸低于 840 像素？

我正在使用：Angular、Angular Materials & Flex-Layout。

具体来说，为什么这不起作用以及我应该改用什么？

样式.css：

0 投票
2 回答
1882 浏览

javascript - 角度弹性布局错误溢出

我想使用 Angular 的 flexLayout。问题是，当我尝试溢出灵活的内容时，它不会。当内容大于其容器时，它只是“过度生长”它的容器。

我找到了解决方案，但目前内在和外在尺寸支持很差。

这是一个笨拙的例子。我试过min-height道具：

它适用于铬。有没有不同的解决方案来做min-height: min-content;结果？

编辑：我发现这个例子在 Firefox 和 Edge 上运行良好，只有 chrome 有问题，如屏幕截图所示。 铬合金

0 投票
3 回答
6517 浏览

angular - 角度错误：没有 ObservableMedia 的提供者

我正在尝试使用 ObservableMedia。应用程序编译成功，但在浏览器控制台中我看到此错误

ERROR 错误：没有 ObservableMedia 的提供者！在 injectionError (core.es5.js:1169) 在 noProviderError (core.es5.js:1207)

这是我的代码

请帮忙。谢谢

0 投票
1 回答
434 浏览

angular - 为什么内容会超出 flex 容器？

hy，我有以下结构：

现在由于某种原因，它只能在桌面浏览器和一些较旧的移动设备上运行（如预期的那样），但在一些新手机上，内容超出了弹性容器。任何人都可以提出任何建议并解释为什么会这样吗？我期望的是宽屏幕上的一行和小屏幕上的一列。我flex-layout用于我的网站布局（以及重新排列）。所以现在我开始考虑选择flex-layout网站布局是否正确。我已经阅读了一些通过更改屏幕更改属性来使用md-grid-list的解决方案cols，但我对此表示怀疑，因为我看到它需要一些额外的代码来确定屏幕更改的时刻，因为网格列表不会自行完成。


12345678910