гибкая верстка - PullRequest
Новая
       35

гибкая верстка

0 голосов
/ 04 октября 2019

У меня есть страница, которая содержит строки и мат-карты. Я хочу сделать это отзывчивым. Если я использую мобильный телефон или планшет, я хочу, чтобы карточки находились друг под другом, а не отображали последнюю. Если я на ПК, я хочу, чтобы это соответствовало размеру экрана 

<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
  <mat-card fxFlex="33.3%" fxFlex.lt-md="50%" fxFlex.lt-sm="100">           
    card 1
  </mat-card>

  <mat-card fxFlex="33.3%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">           
    card 2
  </mat-card>

  <mat-card fxFlex="33.3%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">           
    card 3
  </mat-card>
</div>

<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
  <mat-card fxFlex="calc2Cols" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">
    card 4
  </mat-card>

  <mat-card fxFlex="33.3%" fxFlex.lt-md="50%" fxFlex.lt-sm="0%">           

  </mat-card>
</div>

Текущий результат: enter image description here

Еще в режиме ПК, когда позволяет размер экрана. Я хочу, чтобы первая карта второй строки была размером с первые 2 первой строки

...