css - 모바일 화면에서 "mat-form-fields"에 여백을 추가하지 않는 "angular-flex-layout"

각 재료와 플렉스 레이아웃을 사용하여 반응 형을 만들었습니다. 데스크톱 및 ipad 화면에서 제대로 작동합니다.

휴대 기기의 경우 양식 필드를 가운데에 맞추고 화면의 왼쪽과 오른쪽에 여백을 추가하고 싶습니다. flex-layout에서 수행하는 방법이 있습니까?

ngClass.xs 를 사용하여 커스텀 CSS로 어떻게 할 수 없다면 ? 너비를 90 %로 설정하려고했지만 제대로 가운데에 있지 않고 이상하게 보입니다.

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="2%" fxLayoutAlign="center">
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>
</div>