"angular-flex-layout“不为移动屏幕上的”mat-form-field“添加页边距

Question

我已经使用角度材料和flex布局创建了一个响应式表单。它在台式机和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

最简单、最方便的方法是在flex容器上设置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，因此这不会产生任何影响。

Answer 2

<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”。