Layout Demos:
Version: 7.0.0-beta.23
These Layout demos are curated from the AngularJS Material documentation, GitHub Issues, StackOverflow, and CodePen.
Hint: Click on any of the samples below to toggle the layout direction(s).
Static
Grids
Responsive
Github
StackOverflow
Layout Children with 'layout-align'
1
2
3
4
5
Layout Direction
row
column
Alignment in Layout Direction (horizontal)
none
start (default)
center
end
space-around
space-between
space-evenly
Alignment in Perpendicular Direction (vertical)
none
start
center
end
stretch (default)
<div fxLayout="row"
fxLayoutAlign="space-around center"
>
Layout Fill
Using 'fxFill' to fill available width and height of parent container.
A
B
Layout Gap
Using 'fxLayoutGap' to create a grid-like layout
A
B
C
D
E
F
G
'Flex' to Fill Row
Simple row using "flex" on 3rd element to fill available main axis.
fxFlex="20"
fxFlex="60"
fxFlex
<div fxLayout="row" >
'Flex' with Layout-Wrap
Using "layout-wrap" to wrap positioned items within a layout container
fxFlex="30"
fxFlex="45"
fxFlex="19"
fxFlex="33"
fxFlex="67"
fxFlex="50"
fxFlex
<div fxLayout="row" >
Flex Attribute Values
Explore impact of non-numerical values for the 'fxFlex' API:
[fxFlex="none"]
[fxFlex]
[fxFlex="nogrow"]
[fxFlex="grow"]
[fxFlex="initial"]
[fxFlex="auto"]
[fxFlex="noshrink"]
[fxFlex="0"]
<div fxLayout="row wrap" >
Flex Offset Values
Explore impact of values for the 'flex-offset' API:
[fxFlex="66"] [fxFlexOffset="15"]
[fxFlex]
<div fxLayout="row" >
Flex with Align-Self
Click on 'target' to explore how 'flex-align' can change the alignment for a single element only.
1
target
3
4
5
<div fxFlexAlign="center">
Direction support for RTL
Simple row using layout gap and flex offset to demonstrate changes in layout direction between rtl and ltr.
Toggle direction
item 1
item 2
item 3
<div dir="ltr" fxLayoutGap="20px">