Flex

We take advantage of Flexbox for many of our components; so it made sense for us to expose a number of utilities as well.

Deep match

While flex children automatically recieve the same height, children's children (where you may actually have your styling) does not. Use the .u-flexDeepMatch modifier attached to .row to resolve this.

Aligment

Note

{small,medium,large} indicate rule declarations at respective screen-sizes.

Class	Description
`.u-flexStart` `.u-flexStart@{small,medium,large}`	Cross-start margin edge of the items is placed on the cross-start line.
`.u-flexCenter` `.u-flexCenter@{small,medium,large}`	Items are centered along the line.
`.u-flexEnd` `.u-flexEnd@{small,medium,large}`	Forces row to right.
`.u-flexTop` `.u-flexTop@{small,medium,large}`	Cross-start margin edge of the items is placed on the cross-start line.
`.u-flexMiddle` `.u-flexMiddle@{small,medium,large}`	Items are centered in the cross-axis.
`.u-flexBottom` `.u-flexBottom@{small,medium,large}`	Cross-end margin edge of the items is placed on the cross-end line.
`.u-flexBetween`	Items are positioned with space between the lines.
`.u-flexAround`	Items are positioned with space before, between, and after the lines.

Dimensions

Class	Description
`.u-flexItemNone`	Content dimensions
`.u-flexItemAuto`	Space is allocated considering content
`.u-flexItem1`	Space is allocated solely based on flex.