To customize the size and position of elements in a layout container, use the
flex, flex-order, and flex-offset attributes on the container's child elements:
Add the flex directive 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 adjust its size with respect to its
parent container and the other elements within the container.
A layout child's flex directive 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
directive value is restricted to multiples of five, 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 directives 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 its width and height values. |
| flex="initial" | Will shrink as needed. Starts with a size based on its width and height values. |
| flex="auto" | Will grow and shrink as needed. Starts with a size based on its width and height values. |
| flex="grow" | Will grow and shrink as needed. Starts with a size of 100%. Same as flex="100". |
| flex="nogrow" | Will shrink as needed, but won't grow. Starts with a size based on its width and height values. |
| flex="noshrink" | Will grow as needed, but won't shrink. Starts with a size based on its width and height values. |
Add the flex-order directive to a layout child to set its
order position within the layout container. Any integer value from -20 to 20 is accepted.
[flex-order="-1"]
[flex-order="1"]
[flex-order-gt-md="3"]
[flex-order="2"]
[flex-order="3"]
[flex-order-gt-md="1"]
| API | Device width when breakpoint overrides default |
|---|---|
| flex-order | Sets default layout order unless overridden by another breakpoint. |
| flex-order-xs | width < 600px |
| flex-order-gt-xs | width >= 600px |
| flex-order-sm | 600px <= width < 960px |
| flex-order-gt-sm | width >= 960px |
| flex-order-md | 960px <= width < 1280px |
| flex-order-gt-md | width >= 1280px |
| flex-order-lg | 1280px <= width < 1920px |
| flex-order-gt-lg | width >= 1920px |
| flex-order-xl | width >= 1920px |
See the layout options page for more information on directives like
hide, hide-gt-md, and show-gt-md used in the above examples.
Add the flex-offset directive to a layout child to set its
offset percentage within the layout container. Values must be multiples
of 5 or 33 / 66. These offsets establish a margin-left
with respect to the preceding element or the containers left boundary.
When using flex-offset the margin-left offset is applied... regardless of your choice of flex-order.
or if you use a flex-direction: reverse.
| API | Device width when breakpoint overrides default |
|---|---|
| flex-offset | Sets default margin-left offset (%-based) unless overridden by another breakpoint. |
| flex-offset-xs | width < 600px |
| flex-offset-gt-xs | width >= 600px |
| flex-offset-sm | 600px <= width < 960px |
| flex-offset-gt-sm | width >= 960px |
| flex-offset-md | 960px <= width < 1280px |
| flex-offset-gt-md | width >= 1280px |
| flex-offset-lg | 1280px <= width < 1920px |
| flex-offset-gt-lg | width >= 1920px |
| flex-offset-xl | width >= 1920px |