“angular-flex-layout”没有为移动屏幕上的“mat-form-fields”添加边距

Question

我使用 angular material 和 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>

Answer 1

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" 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>

将 fxLayoutGap.gt-xs="2%" 更改为 fxLayoutGap="20px"。

Answer 2

最简单最方便的方法是在弹性容器上设置ngClass.xs

<div class="container" fxLayout="row" fxLayout.xs="column" 
     fxLayoutGap.gt-xs="2%"  fxLayoutAlign="center" ngClass.xs="mobileContainer">

.mobileContainer 在哪里

.mobileContainer mat-form-field {
  margin: 8px 16px;
}

这是一个简单的演示https://stackblitz.com/edit/angular-dufpaa

作为旁注；

你不需要在mat-form-field 元素上使用fxFlex.xs="90%"，因为fxLayout.xs="column" 容器在xs 屏幕上有列布局，而fxFlex.xs="90%" 在列布局上意味着“占据父母身高的90%”。因为 flex-shrink 默认为 1 这不会产生任何影响。