fxFlex has no affect

I'm using fsflex to left align the first two divs and right align the 2nd two. I've used a spacer and fsflex but fsflex does not do anything and leaves everything left aligned.

I have the following markup:

<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>

I can achieve the desired effect with the following css but would rather use angular flex:

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

    .spacer {
      flex-grow: 150;
    }
  }

You are using fsFlex instead of fxFlex