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% 确定，但请验证，有时看起来差异很小）。我还包括对边距和填充的一般重置，但我猜你已经有了这个。

请参考这个简化的 stackblitz：https://stackblitz.com/edit/angular-yetkra?embed=1&file=src/app/app.component.html

因为我没有你的 CSS 我不知道还有什么问题。

angularfxlayout div 对齐问题

angularfxlayout div alignment issue

angular

flexbox

angular-flex-layout