fxFlex 没有影响

Question

我正在使用 fsflex 左对齐前两个 div，右对齐第二个 div。我使用了垫片和 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 达到预期的效果，但我更愿意使用 angular flex:

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

    .spacer {
      flex-grow: 150;
    }
  }

Answer 1

您正在使用 fsFlex 而不是 fxFlex

fxFlex 没有影响

fxFlex has no affect

css

angular

flex3

angular-flex-layout