angularfxlayout div对齐问题

Question

我正在尝试在具有响应式布局的网格中显示卡片，如有必要，卡片每行4张，每行3张，依此类推。我为此使用了angularfxlayout，效果很好，但div在行之间未对齐。

赞：

所需的输出：

这是我的代码：

<div fxLayout fxFill fxLayoutAlign="space-around center">
<div fxLayout="row wrap" fxFlex="90%" fxLayout.lt-md="column" fxLayoutGap="2%" fxLayoutAlign="center center">
    <ng-container *ngFor="let dinner of dinners">
        <mat-card class="card-picture" fxLayout="column" >
            <mat-card-title class="dinner-title-details">
              <span>{{dinner.title}}</span>        
            </mat-card-title>
            <mat-card-content>
                <img mat-card-image src="../assets/dinnersample.jpg">
            </mat-card-content>
            <mat-card-actions>
                <i class="fab fa-facebook facebook"></i>
                <i class="fab fa-twitter twitter"></i>
                <i class="fab fa-instagram instagram"></i>
            </mat-card-actions>
          </mat-card>
    </ng-container>  
  </div>

有什么办法可以使卡片垂直对齐？ 谢谢！

Answer 1

我做了两件事以使其在Firefox和chrome下工作。

删除fxLayoutAlign =“ center center”并在图像上设置固定宽度（我不确定100％的宽度，但是请验证一下，有时看起来有些微的差异）。我还包括了边距和填充的一般重置，但我想您已经拥有了。

请参考以下简化的堆叠闪电战：https://stackblitz.com/edit/angular-yetkra?embed=1&file=src/app/app.component.html

因为我没有您的CSS，所以我不知道还有什么问题。