Overview

You can use our responsive flexbox utilities classes to control the layout, alignment and sizing of any flexbox container and its children.

Our flexbox utility classes are divided into two categories:

Parent utilities (flex containers): these apply flex properties for the parent container elements.
Child utilities (flex items): these apply flex properties to the child elements.

Wondering what utility classes are?

A utility class applies a single rule or a very simple, universal pattern. In the context of this design system, utility classes are used as overrides or helper classes. That help to make small style adjustments to components or to assist in setting up more complex layouts.

About flexbox

Flexbox (Flexible Box Layout Module) is a CSS layout mode designed to streamline the arrangement of elements on a page even when their size is unknown or dynamic.

Unlike traditional layouts, flexbox allows for better space distribution between items with a variety of alignment capabilities across different screen sizes. It is particularly useful for aligning content horizontally or vertically and making responsive layouts where elements flow and stack.

Before you use flexbox utilities in your projects its best get familiar with the basic principles, we recommend the following two resources which both offer offers excellent explanations, examples, and visual diagrams.

Enabling flex behaviours

To set up a flexbox container using utility classes, begin by applying the display property, this class activates the flexbox model.
The display propter can be set to inline or block depending on the given value.

Once the element is designated as a flex container, you can further manipulate its layout and alignment using additional flex utilities applied either to the parent container or to the child items.

Applying display

The display property of flex items can be set using the following classes:

qld__display-flex or qld__display-{breakpoint}-flex
qld__display-inline-flex or qld__display-{breakpoint}-inline-flex

Vanilla example

Flexbox container

Inline flexbox container

<!-- Display flex -->
<div class="qld__display-flex">Flexbox container</div>

<!-- Display inline flex -->
<div class="qld__display-inline-flex">Inline flexbox container</div>

Responsive variations

Most flexbox utilities classes can be adjusted per breakpoint using the following formulas:

qld__display-{breakpoint}-[property] for display flex properties and
qld__display-{breakpoint}-[property]-[behaviour] for various flex properties

Each responsive style is applied to the specified breakpoint and up.

The breakpoint can be one of the following: xs, sm, md, lg, or xl.

<!-- Apply the display flex property to a container at the large breakpoint and above -->
<div class="qld__display-lg-flex">Flexbox container</div>

<!-- Wrap as default behaviour then change to nowrap at the lg breakpoint -->
<div class="qld__display-flex qld__flex-wrap qld__flex-lg-nowrap">Flexbox container</div>

<!-- Align self to end at the medium breakpoint and above -->
<div class="qld__display-flex">
    <div>Flex item</div>
    <div class="qld__align-self-md-end">Flex item</div>
    <div>Flex item</div>
</div>

<!-- Align items center at xl breakpoint -->
<div class="qld__display-flex qld__align-items-xl-center">...</div>

Spacing classes

There are a variety of utility classes that can be applied to flexbox container to control the gaps between rows and columns.

These classes detailed within our spacing guidelines under the implementation tab.

Usage guidelines

When to use

Override system defaults: Even the most thoroughly planned design systems can't foresee every possible use case. Utility classes provide a convenient way to override system defaults or to apply styles that are exceptions to the general design rules, without altering the underlying CSS architecture.
Minor adjustments and fine-tuning: When a component needs small style adjustments that do not justify the creation of a new component variant, utility classes can be used to make these tweaks. This keeps the stylesheet cleaner and more manageable.
Centering content: One of the most common challenges in CSS is vertically and horizontally centering content. Flexbox utilities simplify this by providing classes that can be applied to center content in various contexts, eliminating the need for complex calculations or additional wrappers.

Last updated: April 2025

Back to top