角材料柔性布局

Question

<mat-card fxLayout="row wrap" fxFlex.sm="60" fxFlexOffset.sm="20" fxFlex.md="60" fxFlexOffset.md="20" fxFlex.lg="40" fxFlexOffset.lg="30"
  fxFlex.xl="40" fxFlexOffset.xl="30">
  <mat-card-content>
    <form [formGroup]="messageForm" class="example-form">
      <mat-form-field style="width: 100%;" fxFlex="20" fxFlex.sm="100">
        <input matInput formControlName="title" name="title" placeholder="Enter your title">
      </mat-form-field>
      <mat-form-field style="width: 100%;" fxFlex="80" fxFlex.sm="100">
        <input matInput formControlName="content" name="content" placeholder="Enter your message">
      </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>
      <mat-icon>send</mat-icon> Send
    </button>
  </mat-card-actions>
</mat-card>

为什么屏幕尺寸为“sm”时。 mat-form-field应为fxflex =“100”，但另一个mat-form-field不会出现故障。它将显示为50/50。如果屏幕很小，我想实现。 mat-form-field的大小都是100，因此它们将消耗整行。它现在有2行而不是1行。它们的大小相同。