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. |