使用Angular Flex布局进行元素对齐

Question

我在应用程序中将Angular flex布局与Angular材质一起使用，我想在间隙之间分隔的页面中正确对齐卡片。我已经启动了以下代码，但是卡未正确对齐。如下图所示，当换到新行时，第4张卡片与第1张卡片没有间隙。在这种情况下，我希望第4个Mat卡有一个间隙，例如“ 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

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

  

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