Css 角度FlexLayout将所有设备的select element和fab mini对齐在同一条线上，但在边界上取消对齐

我试图在同一行上对齐两个元素。对齐很好，但对于不同的设备，有时搜索fab mini会在视图之外，而对于某些设备，fab mini会在视图内部。如何将fab mini正确对齐到右侧，并将每个设备的输入元素点亮到左侧

<section>
  <div fxLayout fxLayout.xs="row" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div fxFlex="96%" fxFlex.xs="90%" fxFlex.md="90%">
      <ng-select
        [placeholder]="to.placeholder"
        [formControl]="formControl"
        [items]="items"
        [addTag]="addTag"
        [hideSelected]="true"
        multiple="true"
        bindLabel="name"
      >
      </ng-select>
    </div>
    <div fxFlex="4%" fxFlex.xs="10%" fxFlex.md="90%">
      <a href="javaScript:void(0)" mat-mini-fab color="primary" (click)="openSearchTable()">
        <mat-icon>search</mat-icon>
      </a>
    </div>
  </div>
</section>

现状 用于网络

适用于平板电脑和手机

---

检查

输入

和

图标

行height@Awais：是如何解决此问题？：）我的意思是检查

图标

和

输入

行高！他们平等吗？还可以尝试

fxLayoutAlign=“start center”

No它们不相等。我会试试你的建议。感谢您正在使用间隙，因此您需要将间隙作为fxflex=“calc（4%-10px）检查

input

和

icon

行减去height@Awais：是，如何解决此问题？：）我的意思是检查

图标和
输入
行高！它们相等吗？并尝试
fxLayoutAlign=“启动中心”“
不，它们不相等。我会试试你的建议。感谢您使用的是gap，因此您需要将gap减去为fxflex=“calc（4%-10px）