我有這樣一頁:

<div class="bookings" fxLayout="row" fxLayoutAlign="center start">
  <div fxFlex.lg="70" fxLayout="column" class="mt-48">
    <div>
      <h1 class="font-weight-700">{{ 'BOOKING.Select' | translate }}</h1>
    </div>
    <div fxLayout="row" fxLayoutAlign="center center">
      <mat-card class="p-28 mr-12 cursor-pointer card" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
      <mat-card class="p-28 mx-12 card disabled" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
      <mat-card class="p-28 ml-12 card disabled" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
    </div>
    <div fxLayout="row" fxLayoutAlign="center center">
      <mat-card class="p-28 mr-12 cursor-pointer card" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
      <mat-card class="p-28 mx-12 card disabled" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
      <mat-card class="p-28 ml-12 card disabled" fxFlex="33" fxLayout="column" fxFlexAlign="stretch" fxLayoutAlign="center center">
      </mat-card>
    </div>
  </div>
</div>

如果我在下排有3張牌，它會正確地與頂排對齊，但我想在下排只放2張牌，這會打亂與頂排的對齊。 我嘗試過將fxFlex設置為較低的值，但它在調整大小時會打亂對齊。 如何在下排只有2張牌的情況下對齊兩行？ 這是css:

.bookings {
    display: flex;
    height: 100%;
    width: 100%;

    .card {
      transition: 0.4s ease-in-out;

      .coming-soon-overlay {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.7);
        cursor: not-allowed;
      }
    }

    .card:not(.disabled):hover {
      box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.12) !important;
    }
}

附言: 下排的mat卡比上排稍寬，導致對齊問題。即使我剛剛復制粘貼了上面一行，并刪除了最后一張卡片..