Elements alignment using Angular Flex Layout

0
votes

I'm using Angular flex layout with Angular material in my application and I would like to align correctly my cards in a page separed by gaps. I've started the following code but the cards is not been align correctly. As you can see in the image below, the 4th card don't have a gap with the 1st when breaks to the new line. In this case, I would like that the 4th mat-card has a gap, like a "margin-top", but I would like to use the flexlayout features instead of pure CSS.

enter image description here

<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>
1
cssangularangular-materialangular-flex-layout

1 Answers

1
votes

When in row mode, fxLayoutGap only applies a margin-right. In column mode it applies a margin-bottom. What you want is Grid Mode, just change fxLayoutGap="1.5%" to fxLayoutGap="1.5% grid" and it should apply the gap as if it were a grid.

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