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"
.
You can specify multiple flex
directives on the same element in order to create
flexible responsive behaviors across device sizes.
Please take care not to overlap these directives, for example:
flex="100" flex-md="50" flex-gt-sm="25"
. In this example, there are two directives
that apply to "medium" devices (50
and 25
).
The below example demonstrates how to use multiple flex
directives overrides to
achieve a desirable outcome:
When a responsive layout directive like layout-gt-sm
is active, any flex directives
within that layout, that you want applied, should be active at the same time. This means that
the flex directives that match up with layout-gt-sm
would be
flex-gt-sm
and not just flex
.
This example demonstrates what happens when the proper flex suffix is omitted. In this case, the
flex="66"
directive is interpreted in context of the layout="column"
layout. This is most likely not desirable.
Here's the same example as above with the correct flex-gt-sm="66"
directive:
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 AngularJS 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" .
Note: There is a known bug with this attribute in IE11 when the parent container has no explicit height set. See our Troubleshooting page for more info. |
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 |