柔性佈局不正常

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>