Switch to WilmingtonOverview
Flexbox
Use these Flexbox utility classes to quickly modify flex container and alignment styles.
| Class | Type | CSS | Description |
|---|---|---|---|
| .u-flex-container | parent | display: flex | Used on any element to declare it as a flex element. |
| .u-flex-align--left | parent | justify-content: flex-start | Distributes flex children to the left. |
| .u-flex-align--right | parent | justify-content: flex-end | Distributes flex children to the right. |
| .u-flex-align--center | parent | justify-content: middle | Distributes flex children to the middle. |
| .u-flex-align--justify | parent | justify-content: space-between | Distributes flex children to the left and right edges of the container. |
| .u-flex-align--spaced | parent | justify-content: space-around | Distributes flex children evenly all around. |
| .u-flex-align--top | parent | align-items: top | Aligns flex children to the top of container. |
| .u-flex-align--middle | parent | align-items: center | Aligns flex children to the center of container. |
| .u-flex-align--bottom | parent | align-items: bottom | Aligns flex children to the bottom of container. |
| .u-flex-align--stretch | parent | align-items: stretch | Stretches flex children to fill the container. |
| .u-flex-dir--row | parent | flex-direction: row | All child elements will flow horizonatally from left to right. |
| .u-flex-dir--row-reverse | parent | flex-direction: row-reverse | All child elements will flow horizonatally from right to left. |
| .u-flex-dir--column | parent | flex-direction: column | All child elements will flow vertically from top to bottom. |
| .u-flex-dir--column-reverse | parent | flex-direction: column-reverse | All child elements will flow vertically from bottom to top. |
| .u-flex-wrap--wrap | parent | flex-wrap: wrap | All child elements will wrap around to a new row if necessary. |
| .u-flex-wrap--nowrap | parent | flex-wrap: nowrap | All child elements will stay on the same row as each other and expand the parent horizontally. |
| .u-flex-wrap--wrap-reverse | parent | flex-wrap: wrap-reverse | All child elements will wrap around to a new row, in reverse order, if necessary. |
| .u-flex-wrap--wrap-inherit | parent | flex-wrap: inherit | Element will inherit the flex-wrap property from its parent. |
| .u-flex-wrap--wrap-initial | parent | flex-wrap: initial | Element will have its default flex-wrap property value. |
| .u-flex-wrap--wrap-unset | parent | flex-wrap: unset | Element 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--top | child | align-self: start | Aligns self to the top of flex parent container. |
| .u-flex-align-self--middle | child | align-self: center | Aligns self to the center of flex parent container. |
| .u-flex-align-self--bottom | child | align-self: end | Aligns self to the bottom of flex parent container. |
| .u-flex-align-self--stretch | child | align-self: end | Stretches self to fill flex parent container. |
| .u-flex-child--auto | child | flex: 1 1 auto | Element will grow and shrink as needed. |
| .u-flex-child--grow | child | flex: 1 0 auto | Element will grow to fill the space of flex parent. |
| .u-flex-child--shrink | child | flex: 0 1 auto | Element will shrink if necessary to fit inside of parent. |