角度：对齐垫网格瓷砖答案

【问题标题】：Angular: Align mat-grid-tile角度：对齐垫网格瓷砖
【发布时间】：2021-08-23 23:26:12
【问题描述】：

我在 Angular 及其 mat-grid-list / mat-grid-tile 对齐方面遇到了一些问题。

我当前的 html 如下所示：

<mat-grid-list cols="2" rowHeight="50px">
        <mat-grid-tile>
            <app-filter></app-filter>
        </mat-grid-tile>
        <mat-grid-tile>
        <button mat-raised-button color="primary">
            <mat-icon>document_scanner</mat-icon>
            <span>Export as CSV</span>
        </button>
        </mat-grid-tile>
</mat-grid-list>

在浏览器中是这样的：

但是，我希望第一个网格列向左对齐，第二个网格列向右对齐。这可能吗？

【问题讨论】：

标签： html css angular

【解决方案1】：

通过以下方式解决：

<mat-grid-list cols="2" rowHeight="50px">
    <mat-grid-tile>
        <app-filter></app-filter>
        <span class="flexExpand"></span>
    </mat-grid-tile>

    <mat-grid-tile>
        <span class="flexExpand"></span>
        <button mat-raised-button color="primary">
            <mat-icon>document_scanner</mat-icon>
            <span>Export as CSV</span>
        </button>
    </mat-grid-tile>
</mat-grid-list>

.flexExpand {
    flex: 1 1 auto;
}

【讨论】：

【解决方案2】：

你可以使用弹性。问题是grid-list 的结构非常嵌套，所以我们必须使用 ng-deep 来访问 mat-grid-tile 中内容的直接父级。

.left-tile ::ng-deep.mat-figure{
  display: flex;
  justify-content: flex-start;
}

.right-tile ::ng-deep.mat-figure{
  display: flex;
  justify-content: flex-end;
}

Stackblitz

【讨论】：