柔性布局不正常

Question

我使用柔性布局模块在角4，并排我在桌面模式下侧试图卡片布局需要展示和同在移动模式下，它应该是一个低于一个，但它不是为我工作PLZ建议正确的代码。下面

是我的代码：

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