Switch to M&T
Overview

Flexbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis.

ClassTypeCSSDescription
.u-flex-containerparentdisplay: flexUsed on any element to declare it as a flex element.
.u-flex-align--leftparentjustify-content: flex-startDistributes flex children to the left.
.u-flex-align--rightparentjustify-content: flex-endDistributes flex children to the right.
.u-flex-align--centerparentjustify-content: middleDistributes flex children to the middle.
.u-flex-align--justifyparentjustify-content: space-betweenDistributes flex children to the left and right edges of the container.
.u-flex-align--spacedparentjustify-content: space-aroundDistributes flex children evenly all around.
.u-flex-align--topparentalign-items: topAligns flex children to the top of container.
.u-flex-align--middleparentalign-items: centerAligns flex children to the center of container.
.u-flex-align--bottomparentalign-items: bottomAligns flex children to the bottom of container.
.u-flex-align--stretchparentalign-items: stretchStretches flex children to fill the container.
.u-flex-dir--rowparentflex-direction: rowAll child elements will flow horizonatally from left to right.
.u-flex-dir--row-reverseparentflex-direction: row-reverseAll child elements will flow horizonatally from right to left.
.u-flex-dir--columnparentflex-direction: columnAll child elements will flow vertically from top to bottom.
.u-flex-dir--column-reverseparentflex-direction: column-reverseAll child elements will flow vertically from bottom to top.
.u-flex-wrap--wrapparentflex-wrap: wrapAll child elements will wrap around to a new row if necessary.
.u-flex-wrap--nowrapparentflex-wrap: nowrapAll child elements will stay on the same row as each other and expand the parent horizontally.
.u-flex-wrap--wrap-reverseparentflex-wrap: wrap-reverseAll child elements will wrap around to a new row, in reverse order, if necessary.
.u-flex-wrap--wrap-inheritparentflex-wrap: inheritElement will inherit the flex-wrap property from its parent.
.u-flex-wrap--wrap-initialparentflex-wrap: initialElement will have its default flex-wrap property value.
.u-flex-wrap--wrap-unsetparentflex-wrap: unsetElement will inherit the flex-wrap property from its parent if possible, otherwise it will have its default flex-wrap property value.
.u-flex-align-self--topchildalign-self: startAligns self to the top of flex parent container.
.u-flex-align-self--middlechildalign-self: centerAligns self to the center of flex parent container.
.u-flex-align-self--bottomchildalign-self: endAligns self to the bottom of flex parent container.
.u-flex-align-self--stretchchildalign-self: endStretches self to fill flex parent container.
.u-flex-child--autochildflex: 1 1 autoElement will grow and shrink as needed.
.u-flex-child--growchildflex: 1 0 autoElement will grow to fill the space of flex parent.
.u-flex-child--shrinkchildflex: 0 1 autoElement will shrink if necessary to fit inside of parent.