缩小屏幕时，卡片不会更改行数

Question

一般来说，我的卡片默认有四行。我想使平板电脑版本中的行数减少到 2，移动版本中的行数减少到 1。但最后，只显示在 4 行和 1 行中。

我做错了什么？

<div fxLayout="row" fxLayout.xs="column">
<div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
<mat-card>
</mat-card>
</div>
<div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
<mat-card>
</mat-card>
</div>
<div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
<mat-card>
</mat-card>
</div>
<div fxFlex="25" fxFlex.lt-lg="50">
<mat-card>
</mat-card>
</div>
</div>

Answer 1

像这样尝试：参考

堆栈闪电战在那里使用mat-card而不是消息

<div fxLayout="row wrap">
<div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
<mat-card>
</mat-card>
</div>
<div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
<mat-card>
</mat-card>
</div>
<div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
<mat-card>
</mat-card>
</div>
<div fxFlex="25" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
<mat-card>
</mat-card>
</div>
</div>