带角材料的马赛克布局

【问题标题】：Mosaic layout with angular material带角材料的马赛克布局
【发布时间】：2016-03-22 13:51:48
【问题描述】：

我正在考虑是否可以使用棱角材料制作马赛克布局。我想要做的是根据节数以不同的方式显示节。例如，如果我有 3 个部分要显示，则类似于

Section1 Section2 Section3

4 个部分会是这样的

Section1 Section2 
Section3 Section4

我找不到任何例子。谢谢

【问题讨论】：

看看 Layout 和 Angular Material 的更多信息：material.angularjs.org/latest/layout/introduction 通常使用 flexbox 和 :nth-child.

标签： css angularjs angular-material

【解决方案1】：

您可以通过在每个元素上定义 flex 指令来做到这一点，如 Angular 材质的 layout documentation 中定义的那样。

要实现问题中定义的布局，您可以以这种方式使用指令：

<div layout="row" layout-sm="column">
  <div flex>Section 1</div>
  <div flex>Section 2</div>
</div>

<div layout="row" layout-sm="column">
  <div flex>Section 3</div>
  <div flex>Section 4</div>
</div>

【讨论】：