CSS Flexbox Responsive Layout &% Width

Question

Using angular / flex-layout , I have a simple two-column layout.

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

On small displays, I want the columns to be wrapped, bottom right.

Using angular / flex-layout Responsive API , I add a breakpoint for small screens (between 600px and 959px) with fxLayout.sm="column"per container element:

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

On small screens, the left column becomes the top row and the right column, the bottom row.

However, attributes fxFlex="35%"and fxFlex="65%"continue to run, so the lines overlap. The top line occupies 35% of the screen height , as previously it occupied 35% of the screen width .

. Plunker. , fxLayout.xs, fxLayout.sm, , Plunker .

, fxFlex API (.. 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>

, Plunker .

. -, , . -, , , :

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

API , ?

Answer 1

angular -flex-layout API gt-sm (, ).

fxFlex="", - :

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