Angular Flexlayout LayoutGap在viewPort中没有边距

Question

嗨，我对Angular和FlexLayout有问题。我不明白如何在不同的视图中将输入调整为mat-card-content。完美地适应各种视口大小的柔性。

在确实需要删除容器卡上的边距y的情况。

StackBlitz Demo

<mat-card>
<mat-card-content>
    <form [formGroup]="grupo" (ngSumit)="insertar()">
        <p>NEW TASACION</p>
        <div class="input-row" fxLayout="row wrap" fxLayoutGap="25px">
            <mat-form-field appearance="standard" fxFlex="calc(25% - 25px)" fxFlex.xs="0px">
                <mat-label>Codigo Coordinación</mat-label>
                <input matInput type="text" placeholder="Codigo de Coordinación" formControlName="codigoCoordinacion">
                <mat-icon matSuffix>description</mat-icon>
            </mat-form-field>
            <mat-form-field appearance="standard" fxFlex="calc(50% - 25px)" fxFlex.xs="0px">
                <mat-label>Fecha Tasación</mat-label>
                <input matInput [matDatepicker]="picker1" placeholder="Fecha de Tasación" formControlName="date">
                <mat-datepicker-toggle matSuffix [for]="
                 picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
            </mat-form-field>
            <mat-form-field appearance="standard" fxFlex="calc(25% - 25px)" fxFlex.xs="0px">
                <mat-label>AAA Coordinación</mat-label>
                <input matInput type="text" placeholder="Codigo de Coordinación">
                <mat-icon matSuffix>description</mat-icon>
            </mat-form-field>

        </div>

        <div class="button-row" fxLayout="row wrap" fxLayoutGap="25px" fxLayout.xs="column" fxLayoutAlign="end">
            <button mat-flat-button color="primary" [disabled]="!grupo.valid">Grabar</button>
        </div>
        <!-- <div class="button-row" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="0px" fxLayoutAlign="end">
            <button mat-flat-button color="primary" [disabled]="!grupo.valid">Grabar</button>
        </div> -->
    </form>
</mat-card-content>