角度材质网格布局

Question

Angular Material中网格布局的预定义类是什么？我们在bootstrap中有"row","col-sm-4"等类。我们在Angular Material 2中有这些类吗？ 感谢。

Answer 1

我会告诉你基础知识。

在Angular Material中（对于Angular 2/4），最常用的属性是：

fxLayout="row | column"
fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time)
fxFlex="number" (can accept numbers from 1 to 100)

您也可以将后缀用作fxLayout.xs，依此类推，仅针对特定分辨率应用规则。

有关详细信息，请查看文档：{​​{3}}

要使用对齐方式，可以使用Angularjs Material资源中的演示（与Angular 2/4的Angular Material完全相同）：https://github.com/angular/flex-layout/wiki/API-Documentation

https://material.angularjs.org/latest/layout/alignment

另一个有用的链接：

Answer 2

我创建了一个示例示例，通过查看该示例的代码，可以帮助您更多地了解如何使用网格。我建议您尝试一下，并使用cols数字，colspans和rowpans来了解它们各自的作用。我希望这会有所帮助！

<mat-grid-list cols = "5" rowHeight = "25vh">
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">1
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">2
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">3
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">11
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">22
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">33
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">111
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">222
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">333
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "5"
    [rowspan] = 1> 4444
    </mat-grid-tile>
 </mat-grid-list>