Flex

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 Property Modifiers

The following table describes the supported modifiers for the row and col properties, 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

row-r & col-r Property Modifiers

The following table describes the supported modifiers for the row-r and col-r (reverse) properties, 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-r:x-center
Y-Axis	y-start, y-end, y-center, y-between, y-around, y-evenly, y-stretch, y-baseline	col-r:y-start
Wrap	no-wrap, wrap, reverse	row-r:x-start:wrap

child Property Modifiers

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

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