Гибкий макет не работает должным образом

Question

Я использую модуль разметки Flex в Angular 4, я пытаюсь показать макет карты в настольном режиме бок о бок, и то же самое, когда мобильный режим, он должен быть один ниже, но это не работает для меня, пожалуйста, предложите правильный код.

ниже мой код:

<div fxLayout="row" fxLayout-gt-xs="column">
     <mat-card fxflex fxflex-gt-xs="100"  fxFlex="33.33%">
          <h2>Card title #1</h2>
              <mat-card-content>
                  <p>Some content</p>
              </mat-card-content>
     </mat-card>
     <mat-card fxflex  fxflex-gt-xs="100" fxFlex="33.33%">
          <h2>Card title #2</h2>
              <mat-card-content>
                   <p>Some content</p>
              </mat-card-content>
     </mat-card>

используя эту версию: @angular/flex-layout: ^2.0.0-beta.9

Answer 1

По умолчанию элементы блока размещаются в разных строках. Вам просто нужно обработать ориентацию для экранов XS.

Использовать этот:-

<div fxLayout.xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #1</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #2</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
</div>