Angular Material 仅适用于 Angular Flex 布局？答案

【问题标题】：Angular Material only works with Angular Flex-layout?Angular Material 仅适用于 Angular Flex 布局？
【发布时间】：2019-07-14 07:35:05
【问题描述】：

在最近的一次采访中，有人问我是否知道 flex 是什么，我回答说我对此知之甚少。面试官很震惊，然后问你不知道flex怎么用材料。

他说 Angular Material 不能自定义，除非我们使用 flex。

这是正确的吗？因为在我之前的项目中，我确实使用了 Angular Material 并在不使用任何 flex 属性的情况下对其进行了自定义。

你们能否澄清一下Angular Flex 是否必须使用 Angular Material？

【问题讨论】：

许多角度材质的组件，如 mat-toolbar、mat-expansion-panel-header、mat-horizontal-stepper-header-container 使用 flex 属性。如果您在浏览器中检查 mat-toolbar 元素并查找 display 的属性，您可以看到display : flex
请注意，代替 flex 应该使用的正确术语应该是 "flexbox"。

标签： angular flexbox angular-material angular-flex-layout

【解决方案1】：

Angular Material flex 实现发生在 CSS 之上，技术上没有。您也应该能够使用 CSS 自己完成所有工作。你甚至可以使用 bootstrap flex。

但是，由于您已经在使用 Angular Material 并且 Angular Flex-Layout 是由 Angular 官方团队制作的一个 npm 包，它可以很好地完成这项工作，因此使用它通常是一个好习惯.

比较使用 Bootstrap 或 Angular Flex 的文章： https://codinglatte.com/posts/angular/angular-flex-better-than-bootstrap/

结论（根据文章作者）：

Angular Material 和 Angular Flex Layout 比 bootstrap 更好。这并不是说你不应该使用 bootstrap，但你应该考虑使用这两个库。当然，您仍然可以使用如果您愿意，可以独立使用 Angular Material 来打造漂亮的 UI 用于响应式设计的组件和 Angular Flex 布局。

【讨论】：

【解决方案2】：

像mat-toolbar、mat-expansion-panel-header、mat-horizontal-stepper-header-container 等角材料中的许多组件都使用 flex 属性。

如果您在浏览器中检查 mat-toolbar 元素并查找 display 属性，您可以看到 display : flex

【讨论】：

是的，我检查了它，但它不像我不能在没有显示为 flex 的情况下自定义它，我仍然可以使用 css 自定义它。对吗？