Возможно ли одним fxFlex-ом добиться нужного вида?

#angular2 #flexbox #angular #angular4 #angular5

Необходимо получить такой результат:


Но проблема вот в чем:

Если в блоке fxLayout="row wrap" fxLayoutGap="25px"
для элемента задать fxFlex="20", в строке вмещается 3 элемента, а не 4 из-за отступов
fxLayoutGap в 25px

В инспекторе смотрю для элемента задано max-width: 20%

Думал решить проблему таким образом, fxFlex="calc(20% - 25px)", но в таком случае
в инспекторе уже не максимальная ширина, а min-width: calc(20% - 25px); и вот что получается:


fxLayoutGap="25px grid" также не решает даной задачи, добавляет лишний горизонтальный
скролинг :(

Как можно решить данную задачу ?

Код тут: https://stackblitz.com/edit/angular-j3pgzp
    

Ответы

Ответ 1

Можно добиться, но для этого вам нужно использовать биндинги с медиа запросами:

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


Где gt-md это 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.

Единственный workaround, который предлагает Каэрус Кару (лид 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();

  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. Этот пакет - убийца производительности.