CSS Flexbox Responsive Layout and % widths
The angular-flex-layout Responsive API also has a gt-sm
(greater than small) property.
To avoid having to add every screen size with an fxFlex=""
value you can just do something like this:
<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>
Or you can use the lt-lg
(less than large) property and have
<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>
Jack
Updated on June 13, 2022Comments
-
Jack about 2 years
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 wrap, right below left.
Using angular/flex-layout's Responsive API, I add a breakpoint for small screens (between 600px and 959px) with
fxLayout.sm="column"
on the 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 Right Column, the Bottom Row.
However,
fxFlex="35%"
andfxFlex="65%"
attributes are still honored, and so the rows overlap. The Top Row occupies 35% of the display height, since it previously occupied 35% of the display width.Please see this Plunker for an example of the problem. Note, I used the
fxLayout.xs
breakpoint rather thanfxLayout.sm
to demonstrate the problem since Plunker's divides the display up into small sections.I can fix this by explicitly removing
fxFlex
using the Responsive API (i.e.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>
Please this Plunker for an example of the solution.
There are two problems with this. Firstly, it feels very, very hacky. Secondly, assuming I want the same behaviour for small and extra small displays, I end up with:
<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>
Unless there's any easier way to use the Responsive API for displays below a certain dimension, rather than set breakpoints explicitly?