### Children within a Layout Container

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:

[flex="20"]
[flex="70"]
[flex]

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.

[flex="30"]
[flex="45"]
[flex="25"]
[flex="33"]
[flex="66"]
[flex="50"]
[flex]

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"`.

flex 33% on mobile,
and 66% on gt-sm devices.
flex 66% on mobile,
and 33% on gt-sm devices.

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:

flex 100% on mobile,
and 33% on gt-sm devices.
flex 100% on mobile,
and 66% on gt-sm devices.
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
flex 100% on mobile, 50% on md, and 25% on gt-md devices.

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.

column layout on mobile,
flex 33% on gt-sm devices.
[flex 66%]

Here's the same example as above with the correct `flex-gt-sm="66"` directive:

column layout on mobile,
flex 33% on gt-sm devices.
column layout on mobile,
flex 66% on gt-sm devices.

See the layout options page for more information on responsive flex directives like `hide-sm` and `layout-wrap` used in the above examples.

### Additional Flex Values

There are additional flex values provided by AngularJS Material to improve flexibility and to make the API easier to understand.

[flex="none"]
[flex]
[flex="nogrow"]
[flex="grow"]
[flex="initial"]
[flex="auto"]
[flex="noshrink"]
[flex="0"]

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.

### Ordering HTML Elements

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 Offsets to the Preceding HTML Elements

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`.

[flex-offset="15"] [flex="66"]
[flex]

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