Flex(box)

.u-flex-{BREAKPOINT REFERENCE} Makes the element display flex from the breakpoint referenced in the class name.

.u-inline-flex-{BREAKPOINT REFERENCE} Makes the element display inline-flex from the breakpoint referenced in the class name.

.u-flex-direction-row-{BREAKPOINT REFERENCE} Makes the element flex-direction row from the breakpoint referenced in the class name.

.u-flex-direction-row-reverse-{BREAKPOINT REFERENCE} Makes the element flex-direction row-reverse from the breakpoint referenced in the class name.

.u-flex-direction-column-{BREAKPOINT REFERENCE} Makes the element flex-direction column from the breakpoint referenced in the class name.

.u-flex-direction-column-reverse-{BREAKPOINT REFERENCE} Makes the element flex-direction column-reverse from the breakpoint referenced in the class name.

.u-flex-justify-content-start-{BREAKPOINT REFERENCE} Makes the element justify-content flex-start from the breakpoint referenced in the class name.

.u-flex-justify-content-end-{BREAKPOINT REFERENCE} Makes the element justify-content flex-end from the breakpoint referenced in the class name.

.u-flex-justify-content-center-{BREAKPOINT REFERENCE} Makes the element justify-content center from the breakpoint referenced in the class name.

.u-flex-justify-content-between-{BREAKPOINT REFERENCE} Makes the element justify-content space-between from the breakpoint referenced in the class name.

.u-flex-justify-content-around-{BREAKPOINT REFERENCE} Makes the element justify-content space-around from the breakpoint referenced in the class name.

.u-flex-align-items-start-{BREAKPOINT REFERENCE} Makes the element align-items flex-start from the breakpoint referenced in the class name.

.u-flex-align-items-end-{BREAKPOINT REFERENCE} Makes the element align-items flex-end from the breakpoint referenced in the class name.

.u-flex-align-items-center-{BREAKPOINT REFERENCE} Makes the element align-items center from the breakpoint referenced in the class name.

.u-flex-align-items-baseline-{BREAKPOINT REFERENCE} Makes the element align-items baseline from the breakpoint referenced in the class name.

.u-flex-align-items-stretch-{BREAKPOINT REFERENCE} Makes the element align-items stretch from the breakpoint referenced in the class name.

.u-flex-align-self-start-{BREAKPOINT REFERENCE} Makes the element align-self flex-start from the breakpoint referenced in the class name.

.u-flex-align-self-end-{BREAKPOINT REFERENCE} Makes the element align-self flex-end from the breakpoint referenced in the class name.

.u-flex-align-self-center-{BREAKPOINT REFERENCE} Makes the element align-self center from the breakpoint referenced in the class name.

.u-flex-align-self-baseline-{BREAKPOINT REFERENCE} Makes the element align-self baseline from the breakpoint referenced in the class name.

.u-flex-align-self-stretch-{BREAKPOINT REFERENCE} Makes the element align-self stretch from the breakpoint referenced in the class name.

.u-flex-align-content-start-{BREAKPOINT REFERENCE} Makes the element align-content flex-start from the breakpoint referenced in the class name.

.u-flex-align-content-end-{BREAKPOINT REFERENCE} Makes the element align-content flex-end from the breakpoint referenced in the class name.

.u-flex-align-content-center-{BREAKPOINT REFERENCE} Makes the element align-content center from the breakpoint referenced in the class name.

.u-flex-align-content-around-{BREAKPOINT REFERENCE} Makes the element align-content space-around from the breakpoint referenced in the class name.

.u-flex-align-content-stretch-{BREAKPOINT REFERENCE} Makes the element align-content stretch from the breakpoint referenced in the class name.

.u-flex-nowrap-{BREAKPOINT REFERENCE} Makes the element flex-wrap nowrap from the breakpoint referenced in the class name.

.u-flex-wrap-{BREAKPOINT REFERENCE} Makes the element flex-wrap wrap from the breakpoint referenced in the class name.

.u-flex-wrap-reverse-{BREAKPOINT REFERENCE} Makes the element flex-wrap: wrap-reverse from the breakpoint referenced in the class name.

The above utility classes will allow you to amend the flexbox behaviour of an element based on the breakpoint reference you use from the default list below:

$breakpoints: (
    xs: 0px,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px
) !default;

Utility classes will be built for all breakpoints apart from ones with a 0px value.

The breakpoints here are the same breakpoints used for @vivid-web/flexboxgrid-sass.

Each breakpoint creates a min-width media query version of the utility class. This allows chaining of class names for responsive display styles. For instance, is you use the .u-flex/strong> class on an element, the element with have display: flex; from a window width of 0px, and then on if you add .u-inline-flex-md to the same element, it will have display: inline-flex; from a window width of 768px