fxFlex没有影响

Question

我正在使用fsflex左对齐前两个div，右对齐第二个div。我使用了spacer和fsflex，但fsflex不会执行任何操作，并且使所有内容保持对齐。

我有以下标记：

<div id="filter-menu" fxLayout="row" fxLayoutAlign="start center">
        <div fsFlex="10">
            <mat-form-field>
                <mat-select placeholder="Acciones Multiples">
                    <mat-option [value]=""></mat-option>
                    <mat-option value="Delete">Eliminar</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div fsFlex="10">
            <button mat-flat-button color="primary">Aplicar</button>
        </div>
        <div  fsFlex="60" class="spacer"></div>
        <div fsFlex="10">
            <mat-form-field>
                <mat-select placeholder="Estado" (selectionChange)="applyFilter($event.value)">
                    <mat-option [value]="">Todas</mat-option>
                    <mat-option value="Active">Activas</mat-option>
                    <mat-option value="Inactive">Inactivas</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div fsFlex>
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador por nombre o CIF">
            </mat-form-field>
        </div>
    </div>

我可以通过以下css达到所需的效果，但宁愿使用角度弯曲：

#filter-menu {
    > div:not(.spacer) {
      flex-grow: 3;
    }

    .spacer {
      flex-grow: 150;
    }
  }

Answer 1

您正在使用fsFlex而不是fxFlex