To customize the size and position of elements in a layout, use the
flex
, flex-order
, and flex-offset
attributes.
Add the flex
attribute to a layout's child element and the element will flex (grow or shrink) to fit
the area unused by other elements. flex
defines how the element will ajust its size with respect to its
parent container and the other other elements within the container.
A layout child's flex
attribute can be given an integer value from 0-100.
The element will stretch to the percentage of available space matching the value.
Currently, the flex
attribute value is restricted to multiples of five and 33 or 66.
For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100"
.
See the layout options page for more information on responsive flex attributes like
hide-sm
and layout-wrap
used in the above examples.
There are additional flex values provided by Angular Material to improve flexibility and to make the API easier to understand.
flex | Will grow and shrink as needed. Starts with a size of 0%. Same as flex="0" . |
flex="none" | Will not grow or shrink. Sized based on it's width and height values. |
flex="initial" | Will shrink as needed. Starts with a size based on it's width and height values. |
flex="auto" | Will grow and shrink as needed. Starts with a size based on it's width and height values. |
flex="grow" | Will grow and shrink as needed. Starts with a size of 100%. Same as flex="100" . |
[flex-order="-1"]
[flex-order="1"]
[flex-order-gt-md="3"]
[flex-order="2"]
[flex-order="3"]
[flex-order-gt-md="1"]
Add the flex-order
attribute to a layout child to set its
position within the layout. Any value from -9 to 9 is accepted.
flex-order | Sets element order. |
flex-order-sm | Sets element order on devices less than 600px wide. |
flex-order-gt-sm | Sets element order on devices greater than 600px wide. |
flex-order-md | Sets element order on devices between 600px and 960px wide. |
flex-order-gt-md | Sets element order on devices greater than 960px wide. |
flex-order-lg | Sets element order on devices between 960px and 1200px wide. |
flex-order-gt-lg | Sets element order on devices greater than 1200px wide. |
See the layout options page for more information on attributes like
hide
, hide-gt-md
, and show-gt-md
used in the above examples.
Add the flex-offset
attribute to a layout child to set its
offset percentage within the layout. Values must be multiples
of 5
or 33
/ 66
.
flex-offset | Sets element offset. |
flex-offset-sm | Sets element offset on devices less than 600px wide. |
flex-offset-gt-sm | Sets element offset on devices greater than 600px wide. |
flex-offset-md | Sets element offset on devices between 600px and 960px wide. |
flex-offset-gt-md | Sets element offset on devices greater than 960px wide. |
flex-offset-lg | Sets element offset on devices between 960px and 1200px wide. |
flex-offset-gt-lg | Sets element offset on devices greater than 1200px wide. |