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>

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

1 个答案: