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).
Layout Children with 'layout-align'
1
2
3
4
5
Layout Direction
Alignment in Layout Direction (horizontal)
Alignment in Perpendicular Direction (vertical)
<div fxLayout="row" fxLayoutAlign="space-around center" >
Layout FillUsing 'fxFill' to fill available width and height of parent container.
A
B
Layout GapUsing 'fxLayoutGap' to create a grid-like layout
A
B
C
D
E
F
G
'Flex' to Fill RowSimple row using "flex" on 3rd element to fill available main axis.
fxFlex="20"
fxFlex="60"
fxFlex
<div fxLayout="row" >
'Flex' with Layout-WrapUsing "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 ValuesExplore 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 ValuesExplore impact of values for the 'flex-offset' API:
[fxFlex="66"] [fxFlexOffset="15"]
[fxFlex]
<div fxLayout="row" >
Flex with Align-SelfClick 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.
item 1
item 2
item 3
<div dir="ltr" fxLayoutGap="20px">