缩小屏幕时，卡片不改变行数答案

【问题标题】：When narrowing the screen, the cards do not change the number of rows缩小屏幕时，卡片不改变行数
【发布时间】：2019-12-20 09:50:35
【问题描述】：

一般来说，我的卡片默认有四行。我想让平板电脑版的行数减少到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>

【问题讨论】：

标签： angular angular-flex-layout

【解决方案1】：

试试这样：Refer

Stackblitz 使用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>

【讨论】：