主页 / 问题 / 966642
Accepted
Андрей
Asked:2020-04-07 22:16:53 +0000 UTC2020-04-07 22:16:53 +0000 UTC

是否可以使用一个 fxFlex 实现所需的外观？

  • 772

您需要得到以下结果： fxFlex 换行 - Angular

但问题是这样的：

如果您在块fxLayout="row wrap" fxLayoutGap="25px" 中为元素设置fxFlex="20"，则该行适合3 个元素，而不是 4，fxLayoutGap因为缩进25px

在检查器中，我寻找元素已设置max-width: 20%

我想以这种方式解决问题fxFlex="calc(20% - 25px)"，但是在这种情况下，检查器不再具有最大宽度，但这min-width: calc(20% - 25px);就是发生的情况： FxFlex 间隙角

fxLayoutGap="25px grid"也没有解决这个问题，增加了额外的水平滚动:(

如何解决这个问题？

此处代码： https ://stackblitz.com/edit/angular-j3pgzp

angular2

1 个回答

  1. Best Answer

    可以实现，但为此您需要使用媒体查询绑定：

    fxFlex.gt-md="calc(20% - 25px)"

    Where gt-mdis screen and (min-width: 1280px)，对于较小的宽度，请使用另一个媒体查询，例如：

    fxFlex.lt-lg="calc(33% - 25px)"

    lt-lg它在哪里screen and (max-width: 1279px)。

    但是另一个问题是你用百分比和2个宽度为33%拉伸的块进行操作，这是包本身的问题flex-layout，因为绑定fxFlex编译成flex + min-width.

    Kaerus Karu (lead) 提供的唯一解决方法flex-layout是手动设置max-width.

    一种选择是手动监视媒体查询更改，这可以MediaObserver从核心为您完成flex-layout：

    import { MediaObserver, MediaChange } from '@angular/flex-layout';

import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

@Component({ ... })
export class SomeComponent implements OnDestroy {
  public fxFlex: string = null;

  private readonly destroy$ = new Subject<void>();

  constructor(mediaObserver: MediaObserver) {
    mediaObserver.asObservable().pipe(
      map((changes: MediaChange[]) => {
        return changes.map(({ mediaQuery }) => mediaQuery);
      }),
      map((queries: string[]) => {
        const matches = queries.find((query) => query === 'screen and (min-width: 1280px)');
        return !!matches;
      }),
      takeUntil(this.destroy$)
    ).subscribe((matches) => {
      if (matches) {
        this.fxFlex = 'calc(25% - 25px)';
      } else {
        this.fxFlex = 'calc(33% - 25px)';
      }
    });
  }

  public ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

    要玩转并了解什么是流mediaObserver，您只需添加console.log(changes).

    然后在模板本身中，您已经可以绑定变量本身：

    [fxFlex]="fxFlex" [style.max-width]="fxFlex"

    我会自己补充——不要完全依赖这个包。使用常规 CSS 编写样式更容易。这个包是性能杀手。

    • 3

相关问题