带有@angular/flex-layout、@angular/material 和带有图像的mat-card 的响应式网格？答案

【问题标题】：Responsive grid with @angular/flex-layout, @angular/material and mat-card with images?带有@angular/flex-layout、@angular/material 和带有图像的mat-card 的响应式网格？
【发布时间】：2020-01-15 02:17:33
【问题描述】：

我有一个这样的基本布局：

   Cell 0     Cell 1      Cell 2 <!-- these are not to appear in actual render
 __________________________________
 | Image 0  | Image 1  | Image 2  |
 |----------| Image 1  |-----------
 | text here| Image 1  | text here|
 ----------------------------------
   Cell 3     Cell 4      Cell 5 <!-- these are not to appear in actual render
 __________________________________
 | Image 3  | Image 4  | Image 5  |
 |----------|----------| Image 5  |
 | text here| text here| Image 5  |
 ----------------------------------

根据屏幕大小，每行应该有 4 个单元格、3 个单元格、2 个单元格或 1 个单元格。

图像应占据整个单元格，并在大小上与其他单元格中的图像对齐。

我的一些尝试：https://stackblitz.com/edit/angular-gk58tk

对于网格、mat-card 和类似的情况，这是一个不常见的用例吗？

我做错了什么？

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
好的，我正在处理 Stack Snippet。有Angular的例子吗？ - 我尝试发布渲染的输出，但它给了我一个字符限制错误。
虽然你已经解决了这个问题，但我想分享这篇在这个意义上看起来很有前途的文章（我没有机会测试它，但通读它我可以说它非常相关问题）：zoaibkhan.com/blog/…

标签： angular responsive-design angular-material css-grid angular-flex-layout

【解决方案1】：

这是一个解决方案，我不知道这是否是您正在寻找的：

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <mat-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>Card 1</mat-card-title>
    <img mat-card-image src="https://kakiseni.org/wp-content/uploads/2018/03/250X250.png" class="image">
    <mat-card-content>Primary card content. Intended for blocks of text</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card>

  <mat-card>...</mat-card>
</div>

我使用fxLayout="row wrap" 作为卡片列表，根据屏幕大小，每行有 1 到 4 张卡片。

Stackblitz

【讨论】：

谢谢，刚刚试了一下，比以前进步了很多。赞成。 SVG 越过垫卡的边界。怎么解决？
也许可以通过 max-height 和 max-width 在图像上设置大小。
非常感谢！真的为我工作。是的，我根据我的要求对百分比进行了一些更改，但是是的，这太棒了！