angularfxlayout div对齐问题答案

【问题标题】：angularfxlayout div alignment issueangularfxlayout div对齐问题
【发布时间】：2019-03-04 21:47:31
【问题描述】：

我正在尝试在具有响应式布局的网格中显示卡片，如有必要，卡片是每行 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>

有什么方法可以让卡片也垂直对齐吗？谢谢！

【问题讨论】：

你好，你也可以提供css吗？

标签： angular flexbox angular-flex-layout

【解决方案1】：

我做了两件事让它在 firefox 和 chrome 下工作。

删除 fxLayoutAlign="center center" 并在图像上设置固定宽度（宽度我不是 100% 确定，但请验证，有时似乎存在微小差异）。我还包括边距和填充的一般重置，但我想你已经有了这个。

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

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

【讨论】：