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

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

这样试试：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>

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

When narrowing the screen, the cards do not change the number of rows

angular-flex-layout

angular