材质角卡展示

Question

我有一个图片库，我想在一个基于宝丽来卡片的系统中显示它们，该系统跨越多行和多列。我面临的问题与图像的布局有关。当图像同时是纵向和横向时，横向图像的 mat-card 属性会膨胀以匹配纵向图像的大小。我怎样才能拥有一个自然填充系统，其中 mat-card 可以适应图像的宽度/高度比？

HTML：

    <div fxLayout="row">
        <div layout="column">
            <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null">
                <mat-card *ngFor="let postcard of postcards let index = index" >
                        <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
                </mat-card>
            </div>
        </div>
    </div>

CSS：

    .postcards {
        max-width: 320px;
    }

当前视图：

这就是我想要实现的目标：

谢谢！

Answer 1

我知道我的反应会很奇怪，但我认为左边的浮动可能是你正在寻找的（是的，我讨厌自己浮动）

但是，如果您摆脱示例中的所有 flex 内容并直接在 mat-card 上添加边距

<div class="mat-elevation-z0" *ngIf="postcards != null">
      <mat-card *ngFor="let postcard of postcards let index = index" >
              <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
      </mat-card>
</div>



mat-card {
   margin: 1rem;
   float: left;
}

您的卡将尝试适应可用空间。但当然，这不会是所有情况的完美匹配。但我认为它是你能找到的更好的纯 CSS 解决方案。

Answer 2

您可能想尝试砖石或同位素来帮助填补空白，两者在 dev 中都有 npm 包：

https://www.npmjs.com/package/angular2-isotope

https://www.npmjs.com/package/angular2-masonry

Answer 3

我认为您正在寻找的是fxLayoutAlign 属性。

尝试像这样将fxLayoutAlign="start start" 添加到您的div：

<div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="start start" class="mat-elevation-z0" *ngIf="postcards != null">

P.S.如果您想尝试不同的选项，请查看Flex-Layout Demo。