Flex Shorthand

Elevate offers a streamlined flexbox experience, with defined properties for both row and column flexbox layouts as well as a large number of supported modifiers to describe flex layouts or adjust flex children as necessary.

Declaring a Flexbox Row in Elevate
<div class = "row">

Declaring a Flexbox Column in Elevate
<div class = "col">

For further convenience, Elevate introduces normalized axes - meaning that you can refer directly to the intended axis without the need to be considerate of flex orientation.

Normalized Axes In Elevate
<div class = "row:x-center:y-start">

X is always horizontal, Y is always vertical

Row & Col Modifiers

The following table describes the supported modifiers for the row property, along with the expected options.

Modifier	Expected Values	Example
X-Axis	x-start, x-end, x-center, x-between, x-around, x-evenly, x-stretch, x-baseline	row:x-center
Y-Axis	y-start, y-end, y-center, y-between, y-around, y-evenly, y-stretch, y-baseline	col:y-start
Wrap	no-wrap, wrap, reverse	row:x-start:wrap

Item Modifiers

The following table describes the supported modifiers for the child (item) property, along with the expected options.

Modifier	Expected Values	Example
Grow	no-grow, grow, auto	item:g-1
Shrink	no-shrink, shrink	item:s-1
Self	self-start, self-end, self-center, self-stretch, self-auto	item:self-auto
Order	order-{value} (where {value} corresponds to a numeric token)`	item:order-5
Basis	basis-{value} (where {value} corresponds to a spacing token)	item:basis-d5