To customize the size and position of elements in a layout, use the
flex, offset, and flex-order attributes.
Add the flex attribute to a layout's child element, and it
will flex (stretch) to fill the available area.
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.
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. |
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. |