使用 Angular Flex 布局的元素对齐

Question

我在我的应用程序中使用 Angular 弹性布局和 Angular material，我想在页面中正确对齐我的卡片，用间隙分隔。我已经启动了以下代码，但卡片没有正确对齐。如下图所示，当换行时，第 4 张牌与第 1 张牌没有间隙。在这种情况下，我希望第 4 张垫卡有间隙，如 "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>

Answer 1

在 row 模式下，fxLayoutGap 仅应用 margin-right。在 column 模式下，它应用 margin-bottom。你要的是Grid Mode，改一下就行了 fxLayoutGap="1.5%" 到 fxLayoutGap="1.5% grid" 并且它应该像网格一样应用间隙。

Check out the documentation here, Grid Mode is documented all the way at the bottom.

使用 Angular Flex 布局的元素对齐

Elements alignment using Angular Flex Layout

css

angular

angular-material

angular-flex-layout