CSSフレックスレスポンスレイアウトと％幅

Question

angular/flex-layoutを使用して、私は単純な2列のレイアウトを持っています。

<div fxFlex fxLayout="row"> 
    <div fxFlex="35%"> 
     <!-- Left Column --> 
    </div> 
    <div fxFlex="65%"> 
     <!-- Right Column --> 
    </div> 
</div> 

小さなディスプレイでは、右下の列が折り返されます。角度/フレックスレイアウトのResponsive APIを使用して

は、私はコンテナ要素にfxLayout.sm="column"と（600PXと959pxの間）の小さな画面のためのブレークポイントを追加します。小さな画面上で

<div fxFlex fxLayout="row" fxLayout.sm="column"> 
    <div fxFlex="35%"> 
     <!-- Left Column, Top Row --> 
    </div> 
    <div fxFlex="65%"> 
     <!-- Right Column, Bottom Row --> 
    </div> 
</div> 

を左の列は、先頭行となり、右列、下列。

ただし、fxFlex="35%"およびfxFlex="65%"の属性は引き続き適用され、行が重複します。以前はディスプレイの35％を占めていたので、トップ・ローはディスプレイの高さの35％を占めています。の幅はです。

この問題の例は、this Plunkerを参照してください。注意してください、私はfxLayout.smよりもむしろfxLayout.xsブレークポイントを使用しました.Plunker'sがディスプレイを小さなセクションに分割するので、問題を実証することに注意してください。

私は明示的に応答API（すなわちfxFlex=""）を使用してfxFlexを削除することによってこの問題を解決することができます

<div fxFlex fxLayout="row" fxLayout.sm="column"> 
    <div fxFlex="35%" fxFlex.sm=""> 
     <!-- Left Column, Top Row --> 
    </div> 
    <div fxFlex="65%" fxFlex.sm=""> 
     <!-- Right Column, Bottom Row --> 
    </div> 
</div> 

くださいthis Plunkerソリューションの例は。

これには2つの問題があります。まず、それは非常に、非常にハッキリと感じる。一定の大きさ以下のディスプレイの応答APIを使用するのではなく、明示的にブレークポイントを設定するための任意の簡単な方法がありますない限り

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column"> 
    <div fxFlex="35%" fxFlex.sm="" fxFlex.xs=""> 
     <!-- Left Column, Top Row --> 
    </div> 
    <div fxFlex="65%" fxFlex.sm="" fxFlex.xs=""> 
     <!-- Right Column, Bottom Row --> 
    </div> 
</div> 

：第二に、私は小さく、余分な小型ディスプレイに同じ行動をしたいと仮定すると、私はで終わりますか？

Answer 1

angle-flex-layoutレスポンスAPIには、gt-sm（小より大きい）プロパティもあります。

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column"> 
    <div fxFlex.gt-sm="35%"> 
     <!-- Left Column, Top Row --> 
    </div> 
    <div fxFlex.gt-sm="65%"> 
     <!-- Right Column, Bottom Row --> 
    </div> 
</div> 

それとも、lt-lg（大未満）プロパティを使用して

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column"> 
    <div fxFlex="35%" fxFlex.lt-lg=""> 
     <!-- Left Column, Top Row --> 
    </div> 
    <div fxFlex="65%" fxFlex.lt-lg=""> 
     <!-- Right Column, Bottom Row --> 
    </div> 
</div> 

を持つことができます：あなたはこのような何かを行うことができ fxFlex=""値を持つすべての画面サイズを追加することを避けるために