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

[flex]
[flex]
[flex]

Add the `flex` attribute to a layout's child element, and it will flex (stretch) to fill the available area.

[flex="33"]
[flex="55"]
[flex]
[flex="66"]
[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.
The `flex` attribute value is restricted to 33, 66, and multiples of five.
For example: `flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ...`.

See the layout options page for more information on responsive flex attributes.

[flex-order="3"]
[flex-order="2"]
[flex-order="1"]

Add the `flex-order` attribute to a layout child to set its position within the layout. Any value from 0-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.

[flex offset="33"]
[flex]

Add the `offset` attribute to a layout child to set its offset percentage within the layout. Values must be multiples of `5`, or `33`, `34`, `66`, `67`.

offset | Sets element offset.
offset-sm | Sets element offset on devices less than 600px wide.
offset-gt-sm | Sets element offset on devices greater than 600px wide.
offset-md | Sets element offset on devices between 600px and 960px wide.
offset-gt-md | Sets element offset on devices greater than 960px wide.
offset-lg | Sets element offset on devices between 960px and 1200px wide.
offset-gt-lg | Sets element offset on devices greater than 1200px wide.