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]

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.