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

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 Angular 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