Question

模板（角度）：

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

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

third div of my mat card which is good

但是当我更改窗口大小时：

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元素不再有空间时，它将对元素进行重新排序，以使所有元素都进入div。

对于您而言，您应该这样做：

          <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 Layout文档：

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

材料按钮尺寸响应

1 个答案: