Material 按钮大小响应

Question

模板（Angular）：

<mat-card fxLayout="row" fxLayoutAlign="space-between" style="margin-bottom: 20px;">

      <div fxFlex="24%">  
         ...
      </div>

      <mat-divider [vertical]="true" style="margin-bottom: 0; margin-left: 1%; margin-right: 1%"></mat-divider>

      <div fxFlex="50%">
         ...
      </div>

      <mat-divider [vertical]="true" style="margin-bottom: 0; margin-left: 1%; margin-right: 1%"></mat-divider>

      <!-- div filter -->
      <div fxFlex="22%">
          <div fxLayout="row" fxLayoutAlign="space-between">

            <mat-form-field>
              <mat-select [formControl]="filterchips" multiple placeholder="Filter by tags">
                <mat-select-trigger>
                  ...
                </mat-select-trigger>
                <mat-option *ngFor="..." [value]="..." (click)="...">
                  {{ ... }}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div style="height: 70%; width: 70%;" style="display: block">
              <button [disabled]="isDisabled" mat-raised-button color="primary" (click)="..." >APPLY FILTER</button><br>
            </div>

          </div>
          <mat-chip-list aria-label="...">
            <mat-chip *ngFor="..." selected>{{...}}</mat-chip>
          </mat-chip-list>
      </div>
    </mat-card>

这是我使用整个屏幕尺寸时的结果（只有第三个 div ）：

third div of my mat card which is good

但是当我改变 window 的大小时：

third div of my mat card no responsiveness

Answer 1

您可以使用 Flex 的属性 wrap： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

因此，当 div 中的 html 元素不再有 space 时，它将重新排序元素，以便所有元素都进入 [=12] =].

对于你的情况，你应该这样做：

          <div fxLayout="row wrap" fxLayoutAlign="space-between">

            <mat-form-field>
              <mat-select [formControl]="filterchips" multiple placeholder="Filter by tags">
                <mat-select-trigger>
                  ...
                </mat-select-trigger>
                <mat-option *ngFor="..." [value]="..." (click)="...">
                  {{ ... }}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div style="height: 70%; width: 70%;" style="display: block">
              <button [disabled]="isDisabled" mat-raised-button color="primary" (click)="..." >APPLY FILTER</button><br>
            </div>

          </div>

查看有关 wrap 的 Angular Flex 布局文档：

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap

Material 按钮大小响应

Material button size responsive

angular-material

responsive

angular