1

我已经使用 angular material 和 flex-layout 创建了一个响应式表单。它在桌面和 ipad 屏幕上运行良好。

对于移动设备，我想将表单域对齐到中心，并在屏幕的左右添加边距。有没有办法在 flex-layout 中做到这一点？

如果不是，如何使用自定义 CSS 来完成ngClass.xs？我尝试将宽度设置为 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>
4

2 回答 2

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

作为旁注；

您不需要元素，因为容器在屏幕上具有列布局，并且fxFlex.xs="90%"在列布局上意味着“占据父母身高的 90%”。默认情况下，这不会产生任何影响。mat-form-fieldfxLayout.xs="column"xsfxFlex.xs="90%"flex-shrink1

于 2019-07-03T22:29:38.417 回答
0 
<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"。

于 2019-07-30T12:29:09.137 回答