Skip to main content

Design System

Flexbox

Use the flexbox utility classes to control various flexbox properties. These are especially useful when combined with flexbox grid classes.

Usage

For these utility classes to work, first create a flex container — you can use the ds-u-display--flex utility class — then apply these utility classes to the container's direct children elements.

Justify content

Use the justify-content utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container. — MDN

The classes follow the format: ds-u-justify-content--{value} and ds-u-{breakpoint}-justify-content--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

  • start (browser default)
  • end
  • center
  • between
  • around
Code snippet
<section>

  <code class="preview__label">ds-u-justify-content--start</code>
  <article class="ds-u-justify-content--start ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
  </article>

  <code class="preview__label">ds-u-justify-content--end</code>
  <article class="ds-u-justify-content--end ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
  </article>

  <code class="preview__label">ds-u-justify-content--center</code>
  <article class="ds-u-justify-content--center ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
  </article>

  <code class="preview__label">ds-u-justify-content--between</code>
  <article class="ds-u-justify-content--between ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1">between</div>
    <div class="ds-u-fill--white ds-u-margin--1">between</div>
    <div class="ds-u-fill--white ds-u-margin--1">between</div>
  </article>

  <code class="preview__label">ds-u-justify-content--around</code>
  <article class="ds-u-justify-content--around ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1">around</div>
    <div class="ds-u-fill--white ds-u-margin--1">around</div>
    <div class="ds-u-fill--white ds-u-margin--1">around</div>
  </article>

</section>

Align items

Use the align-items utility class on a flexbox container to change the alignment of its child elements on the cross axis (y-axis by default).

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction. — MDN

The classes follow the format: ds-u-align-items--{value} and ds-u-{breakpoint}-align-items--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

  • start
  • end
  • center
  • baseline
  • stretch (browser default)
Code snippet
<section>

  <code class="preview__label">ds-u-align-items--start</code>
  <article class="ds-u-align-items--start ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
    <div class="ds-u-fill--white ds-u-margin--1">start</div>
  </article>

  <code class="preview__label">ds-u-align-items--end</code>
  <article class="ds-u-align-items--end ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
    <div class="ds-u-fill--white ds-u-margin--1">end</div>
  </article>

  <code class="preview__label">ds-u-align-items--center</code>
  <article class="ds-u-align-items--center ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
    <div class="ds-u-fill--white ds-u-margin--1">center</div>
  </article>

  <code class="preview__label">ds-u-align-items--baseline</code>
  <article class="ds-u-align-items--baseline ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1">baseline</div>
    <div class="ds-u-fill--white ds-u-margin--1">baseline</div>
    <div class="ds-u-fill--white ds-u-margin--1">baseline</div>
  </article>

  <code class="preview__label">ds-u-align-items--stretch</code>
  <article class="ds-u-align-items--stretch ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1">stretch</div>
    <div class="ds-u-fill--white ds-u-margin--1">stretch</div>
    <div class="ds-u-fill--white ds-u-margin--1">stretch</div>
  </article>

</section>

Flex-wrap

Use the flex-wrap utility class on a flexbox container to change how its child elements wrap.

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. — MDN

The classes follow the format: ds-u-flex-wrap--{value} and ds-u-{breakpoint}-flex-wrap--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

  • nowrap (browser default)
  • wrap
  • reverse
Code snippet
<section>

  <code class="preview__label">ds-u-flex-wrap--nowrap</code>
  <article class="ds-u-flex-wrap--nowrap ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">nowrap element #1</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">nowrap element #2</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">nowrap element #3</div>
  </article>

  <code class="preview__label">ds-u-flex-wrap--wrap</code>
  <article class="ds-u-flex-wrap--wrap ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">wrap element #1</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">wrap element #2</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">wrap element #3</div>
  </article>

  <code class="preview__label">ds-u-flex-wrap--reverse</code>
  <article class="ds-u-flex-wrap--reverse ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">reverse element #1</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">reverse element #2</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%">reverse element #3</div>
  </article>

</section>