Angular Can'；t使用*ngFor在角度方向的一行中正确水平显示不同的Mat卡

我必须在一行中显示3张卡，使用

*ngFor

水平显示

，但它正在垂直显示
。这是我的
mat卡的代码

<div fxFlex="30" *ngIf="mood">
        <mat-card *ngFor="let exercise of mood.exercises">
          <mat-card-header>
            <button mat-button mat-card-avatar><a href={{exercise.link}} target='_blank'><span class="fa fa-play fa-lg"></span></a></button>
            <mat-card-title>
              <h3>{{exercise.name | uppercase}}</h3>
            </mat-card-title>
          </mat-card-header>
          <img mat-card-image src="{{ BaseURL + exercise.image}}" alt={{exercise.name}}>
          <mat-card-content>
            <p>{{exercise.description}}</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
            <span class="flex-spacer"></span>
          </mat-card-actions>
        </mat-card>
   </div>


{{exercise.name |大写}}
{{exercise.description}}

喜欢
分享

使用此代码，所有3张卡都将垂直显示，但我需要水平显示。如果有人能提出我需要做的修改，我将不胜感激。这是我在显示时遇到的问题的屏幕截图，即所有卡都以真实方式显示
在mat card中使用fxFlex，而不是od div

<div *ngIf="mood">
        <mat-card fxFlex="32" style="margin-left: 10px;"  *ngFor="let exercise of mood.exercises">
          <mat-card-header>
            <button mat-button mat-card-avatar><a href={{exercise.link}} target='_blank'><span class="fa fa-play fa-lg"></span></a></button>
            <mat-card-title>
              <h3>{{exercise.name | uppercase}}</h3>
            </mat-card-title>
          </mat-card-header>
          <img mat-card-image src="{{ BaseURL + exercise.image}}" alt={{exercise.name}}>
          <mat-card-content>
            <p>{{exercise.description}}</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
            <span class="flex-spacer"></span>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>


{{exercise.name |大写}}
{{exercise.description}}

喜欢
分享
在mat卡中使用fxFlex，而不是od div

<div *ngIf="mood">
        <mat-card fxFlex="32" style="margin-left: 10px;"  *ngFor="let exercise of mood.exercises">
          <mat-card-header>
            <button mat-button mat-card-avatar><a href={{exercise.link}} target='_blank'><span class="fa fa-play fa-lg"></span></a></button>
            <mat-card-title>
              <h3>{{exercise.name | uppercase}}</h3>
            </mat-card-title>
          </mat-card-header>
          <img mat-card-image src="{{ BaseURL + exercise.image}}" alt={{exercise.name}}>
          <mat-card-content>
            <p>{{exercise.description}}</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
            <span class="flex-spacer"></span>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>


{{exercise.name |大写}}
{{exercise.description}}

喜欢
分享