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

ClassDescription
.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-flexBetweenItems are positioned with space between the lines.
.u-flexAroundItems are positioned with space before, between, and after the lines.

Dimensions

ClassDescription
.u-flexItemNoneContent dimensions
.u-flexItemAutoSpace is allocated considering content
.u-flexItem1Space is allocated solely based on flex.