フレックスレイアウトが正しく動作していない

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スクリーンの向きを処理するだけです。あなたは簡単にデバッグのためにJSFiddleを提供する必要があります

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