CMS Design System

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

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.

Flex direction

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

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

Format: .ds-u-flex-direction--[row|column|row-reverse|column-reverse]

Responsive format: .ds-u-[breakpoint]-flex-direction--[row|column|row-reverse|column-reverse]

.ds-u-flex-direction--row

Element #1

Element #2

Element #3

.ds-u-flex-direction--column

Element #1

Element #2

Element #3

.ds-u-flex-direction--row-reverse>

Element #1

Element #2

Element #3

.ds-u-flex-direction--column-reverse

Element #1

Element #2

Element #3

Code snippet

<section>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--row</code>
    <article
      class="ds-u-display--flex ds-u-flex-direction--row ds-u-padding--1 ds-u-border--1"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #1
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #2
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #3
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--column</code>
    <article
      class="ds-u-display--flex ds-u-flex-direction--column ds-u-padding--1 ds-u-border--1"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #1
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #2
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #3
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">
      .ds-u-flex-direction--row-reverse&gt;
    </code>
    <article
      class="ds-u-display--flex ds-u-flex-direction--row-reverse ds-u-padding--1 ds-u-border--1"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #1
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #2
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #3
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">
      .ds-u-flex-direction--column-reverse
    </code>
    <article
      class="ds-u-display--flex ds-u-flex-direction--column-reverse ds-u-padding--1 ds-u-border--1"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #1
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #2
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1"
        style="width: 50%"
      >
        Element #3
      </div>
    </article>
  </div>
</section>

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

Format: .ds-u-justify-content--[start|end|center|between|around]

Responsive format: .ds-u-[breakpoint]-justify-content--[start|end|center|between|around]

.ds-u-justify-content--start>

start

start>

.ds-u-justify-content--end

end

end>

.ds-u-justify-content--center

center

center>

.ds-u-justify-content--between

between

between>

.ds-u-justify-content--around

around

around>

Code snippet

<section>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-justify-content--start&gt;</code>
    <article
      class="ds-u-justify-content--start ds-u-display--flex ds-u-padding--1 ds-u-border--1"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">start</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">start</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        start&gt;
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-justify-content--end</code>
    <article
      class="ds-u-justify-content--end ds-u-display--flex ds-u-padding--1 ds-u-border--1"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">end</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">end</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">end&gt;</div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-justify-content--center</code>
    <article
      class="ds-u-justify-content--center ds-u-display--flex ds-u-padding--1 ds-u-border--1"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">center</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">center</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        center&gt;
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-justify-content--between</code>
    <article
      class="ds-u-justify-content--between ds-u-display--flex ds-u-padding--1 ds-u-border--1"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">between</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">between</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        between&gt;
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-justify-content--around</code>
    <article
      class="ds-u-justify-content--around ds-u-display--flex ds-u-padding--1 ds-u-border--1"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">around</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">around</div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        around&gt;
      </div>
    </article>
  </div>
</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

Format: .ds-u-align-items--[start|end|center|baseline|stretch]

Responsive format: .ds-u-[breakpoint]-align-items--[start|end|center|baseline|stretch]

.ds-u-align-items--start

start

.ds-u-align-items--end

end

.ds-u-align-items--center

center

.ds-u-align-items--baseline

baseline

.ds-u-align-items--stretch

stretch

Code snippet

<section>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-align-items--start</code>
    <article
      class="ds-u-align-items--start ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="height: 100px"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--small"
      >
        start
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lead"
      >
        start
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--h3"
      >
        start
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-align-items--end</code>
    <article
      class="ds-u-align-items--end ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="height: 100px"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--small"
      >
        end
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lead"
      >
        end
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--h3"
      >
        end
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-align-items--center</code>
    <article
      class="ds-u-align-items--center ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="height: 100px"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--small"
      >
        center
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lead"
      >
        center
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--h3"
      >
        center
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-align-items--baseline</code>
    <article
      class="ds-u-align-items--baseline ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="height: 100px"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--small"
      >
        baseline
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lead"
      >
        baseline
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--h3"
      >
        baseline
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-align-items--stretch</code>
    <article
      class="ds-u-align-items--stretch ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="height: 100px"
    >
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--small"
      >
        stretch
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lead"
      >
        stretch
      </div>
      <div
        class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--h3"
      >
        stretch
      </div>
    </article>
  </div>
</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

Format: .ds-u-flex-wrap--[nowrap|wrap|reverse]

Responsive format: .ds-u-[breakpoint]-flex-wrap--[nowrap|wrap|reverse]

.ds-u-flex-wrap--nowrap

Element #1

Element #2

.ds-u-flex-wrap--wrap

Element #1

Element #2

.ds-u-flex-wrap--reverse

Element #1

Element #2

Code snippet

<section>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--nowrap</code>
    <article
      class="ds-u-flex-wrap--nowrap ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="max-width: 200px"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #1
      </div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #2
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--wrap</code>
    <article
      class="ds-u-flex-wrap--wrap ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="max-width: 200px"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #1
      </div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #2
      </div>
    </article>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--reverse</code>
    <article
      class="ds-u-flex-wrap--reverse ds-u-display--flex ds-u-padding--1 ds-u-border--1"
      style="max-width: 200px"
    >
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #1
      </div>
      <div class="utility-example ds-u-padding--1 ds-u-margin--1">
        Element #2
      </div>
    </article>
  </div>
</section>

Responsive flexbox

Use a breakpoint prefix to change the flexbox at specific breakpoints.

Code snippet