使用 Angular Flex 布局的元素对齐答案

【问题标题】：Elements alignment using Angular Flex Layout使用 Angular Flex 布局的元素对齐
【发布时间】：2019-07-17 18:33:39
【问题描述】：

我在我的应用程序中使用带有 Angular 材料的 Angular flex 布局，我想在由间隙分隔的页面中正确对齐我的卡片。我已经启动了以下代码，但卡片没有正确对齐。如下图所示，第 4 张牌在换行时与第 1 张牌没有间隙。在这种情况下，我希望第四张 mat-card 有一个间隙，例如“margin-top”，但我想使用 flexlayout 功能而不是纯 CSS。

<div fxLayout="row wrap" fxLayoutGap="1.5%" fxLayoutAlign="start center" fxLayout.lt-sm="column">

    <div fxFlex="30%">
        <mat-card class="example-card">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image">
              <button mat-mini-fab color="primary" routerLink="/test">
                <mat-icon>book</mat-icon>
              </button>
            </div>
            <mat-card-title>Test</mat-card-title>
            <mat-card-subtitle> </mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <p>
              Test
            </p>
          </mat-card-content>
        </mat-card>
      </div>

      <div fxFlex="30%">
          <mat-card class="example-card">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image">
                <button mat-mini-fab color="primary" routerLink="/test">
                  <mat-icon>book</mat-icon>
                </button>
              </div>
              <mat-card-title>Test</mat-card-title>
              <mat-card-subtitle> </mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <p>
                Test
              </p>
            </mat-card-content>
          </mat-card>
        </div>

        <div fxFlex="30%">
            <mat-card class="example-card">
              <mat-card-header>
                <div mat-card-avatar class="example-header-image">
                  <button mat-mini-fab color="primary" routerLink="/test">
                    <mat-icon>book</mat-icon>
                  </button>
                </div>
                <mat-card-title>Test</mat-card-title>
                <mat-card-subtitle> </mat-card-subtitle>
              </mat-card-header>
              <mat-card-content>
                <p>
                  Test
                </p>
              </mat-card-content>
            </mat-card>
          </div>

          <div fxFlex="30%">
              <mat-card class="example-card">
                <mat-card-header>
                  <div mat-card-avatar class="example-header-image">
                    <button mat-mini-fab color="primary" routerLink="/test">
                      <mat-icon>book</mat-icon>
                    </button>
                  </div>
                  <mat-card-title>Test</mat-card-title>
                  <mat-card-subtitle> </mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                  <p>
                    Test
                  </p>
                </mat-card-content>
              </mat-card>
            </div>

</div>

【问题讨论】：

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

【解决方案1】：

在row 模式下，fxLayoutGap 仅应用margin-right。在column 模式下，它应用margin-bottom。您想要的是网格模式，只需更改 fxLayoutGap="1.5%" 到 fxLayoutGap="1.5% grid" 它应该像网格一样应用间隙。

查看文档 here, 网格模式一直记录在底部。

【讨论】：