角材料网格系统答案

【问题标题】：angular material grid system角材料网格系统
【发布时间】：2015-04-23 15:29:45
【问题描述】：

我对@987654321@ 和material css 感到困惑。为什么两者都有不同的布局和网格？ angular material design 中的引导容器等价物是什么？

与引导程序相比，我应该在我的项目中使用angular material design 吗？

【问题讨论】：

Alaksandar，您是否仍然感到困惑，或者您是否有足够的信息来选择答案。如果您获得了有用的信息，请感谢有选择的人。

标签： angularjs material-design

【解决方案1】：

使用 Angular Material 的主要原因是因为它基于灵活框布局规范，女巫是 W3C 标准Flexible Box。

引导容器的更接近的标签可能是：<div layout="row" layout-wrap></div>

【讨论】：

【解决方案2】：

Angular Material Design 没有与 Bootstrap 容器完全相同的功能，因为 Material Design (AMD) 更加灵活。一个容器有 8 个部分。 AMD 有 layout 和 flex 属性。 AMD 的 flex 可以增加 5%（BS 中为 20 个部分）或 33 和 66（2 个部分）或 5%、33% 和 66% 的组合，可以达到 100% 以上（几乎任何数量的部分）在这种情况下，会自动创建多行。到目前为止，我发现的带有示例的最佳单页是 https://material.angularjs.org/#/layout/grid 单击每个示例上方的源框，以获取有关 AMD 用于布局和 flex 的 HTML 语法的更多细节。

您可以通过 Child Alignment 获得更大的灵活性，它可以控制每个 div 在水平和垂直方向上的间距。单击该页面上的单选按钮以查看 div 如何居中、展开、推到一端或提升到顶部等。

显示的 HTML 语法适用于设定大小的页面。如果您想要等效的媒体查询来更改不同设备的大小，您需要做一些进一步的编码来制作角度控制器。查看各种组件的 DEMOS 示例以获得一个想法。

【讨论】：

【解决方案3】：

Angular Material 网格 > Bootstrap 网格，尤其适用于 Angular 应用程序。 Bootstrap 网格使用float，与柔性盒模型相比已经过时。 float 取代了可怕的表格布局，但现在灵活的盒子模型开始将 float 推到一边（用于网格布局）。请注意，您需要在旧版浏览器的 CSS 中添加某些后缀。有关如何为旧版浏览器实现 flex 的示例，请参阅 this CSS Tricks article。 Bootstrap 网格应用程序还要求您创建无穷无尽的 div，这看起来很糟糕，在任何使用 HTML5 的应用程序中都应该避免。从技术上讲，您可以编写自己的 Angular 指令来替换某些 div，并根据它们显示的内容或方式对它们进行分组，但是既然它们已经为您完成了这些，为什么不直接使用 Angular Material 呢？

【讨论】：

【解决方案4】：

Materialize 是基于 Google 的 Material Design 的现代响应式 CSS 框架。

和

Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。

因此，如果您想要新的现代设计，我认为您应该使用材料设计。它的动画也很漂亮。

【讨论】：

角材料设计中引导容器的等价物是什么。我可以使用带有角度指令的物化 css 吗？它会按预期工作吗？
是的。我经历了它并感到困惑。我正在寻找引导程序中容器的等价物的答案，以便项目完美地排列在中心

【解决方案5】：

我正在寻找相同问题的答案。我在这里看到了一些很棒的cmets。截至 2016 年 12 月的新增功能：Bootstrap 现在确实支持 Flexbox。检查此link 也检查此link 以使引导程序默认使用 Flexbox，只需更改标志或下载 bootstrap-flex.css。就材质中的网格支持而言，使用网格演示here，有一个看起来很棒的材质弹性布局引擎（我还没有尝试过）。它非常接近引导网格。检查这个link。

【讨论】：

【解决方案6】：

如果你使用 Angular，而不是使用网格，你应该使用 flexbox，Angular 为它提供了一个包：

https://github.com/angular/flex-layout

使用它的一个巨大优势是您可以将 typescript 公共变量用于 flex-layout 指令（您不能使用引导程序来做到这一点）。它还包括用于媒体查询更改的 Observables。

【讨论】：