Angular 角度柔性布局表单字段延伸整个宽度

我有下面的html

<div fxLayout="row" fxLayoutAlign="space-between center">
  <mat-chip-list>
    <mat-chip>{{ type | titlecase }} count : {{ count }}</mat-chip>
    <mat-chip *ngIf="filtersActivated" [removable]="true" (removed)="removeFilters()"
      >Filters
      <mat-icon matChipRemove *ngIf="filtersActivated">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
  <form>
    <mat-form-field>
      <mat-label>Field</mat-label>
      <mat-select>
        <mat-option>None</mat-option>
        <mat-option *ngFor="let hint of hints" [value]="hint.field">{{ hint.label }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
      <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
    </mat-form-field>
  </form>
  <div matTooltip="Select filter(s)" *ngIf="displayFilters">
    <button mat-mini-fab color="primary" (click)="openFilterTool()">
      <mat-icon aria-label="Filter settings">search</mat-icon>
    </button>
  </div>
</div>

{type | titlecase}}计数：{{count}
过滤器
取消
领域
没有一个
{{hint.label}
搜索

它生成了下面的布局

我想创建一个布局，中间形式覆盖整个中间空间。如何使用Angular flexlayout进行此操作

目标布局（不完美）

你能试试这个吗

{type | titlecase}}计数：{{count}
过滤器
取消
领域
没有一个
{{hint.label}
搜索

<>你应该考虑使用间隙…

< p>你能试试这个吗？

  <mat-form-field fxFlex>
          <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
          <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
        </mat-form-field>

{type | titlecase}}计数：{{count}
过滤器
取消
领域
没有一个
{{hint.label}
搜索

<>你应该考虑使用间隙…

<代码>

  <mat-form-field fxFlex>
          <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
          <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
        </mat-form-field>

fxFlex指令应用于fxLayout容器中的元素，并标识flexbox容器流中该元素的大小调整。

---

fxFlex指令应用于fxLayout容器中的元素，并标识flexbox容器流中该元素的大小调整。

您是否尝试过fxFlex并为其指定宽度？看到这个了吗？你试过FxFlex并给它加宽了吗？看到这个了吗