To customize the size and position of elements in a layout, use the flex, flex-order, and flex-offset attributes.

[flex]
[flex]
[flex]

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.

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

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.

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

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.

[flex offset="33"]
[flex]

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.