Flex

When to use it

The Flex object (see About Components for the semantic difference between Objects and Components) provides a simple, composable API for arranging items using CSS Flexbox. It lets you control direction, wrapping, alignment, and gaps between items to build responsive layouts and micro-layouts.

TIP

If column widths is very important, take a look at Grid as well.

Variants

• Direction: .o-flex--row (default) or .o-flex--column for vertical stacking
• Wrapping: .o-flex--nowrap to prevent wrapping (default is wrapping)
• Alignments: .o-flex--start, .o-flex--center, .o-flex--end (affects both axes for convenience)
• Gap Sizes: Use the utilities .u-gap--[xs|s|m|l|xl|xxl] to add extra gutter space between child elements.

Main vs Cross axis

In CSS Flexbox, the main axis follows the flex-direction (row = horizontal, column = vertical). The cross axis is perpendicular to the main axis. Use justify-* utilities for the main axis and align-* for the cross axis; the presets in this object set both to the same value for convenience.

What it looks like

Code examples

Row

<div class="o-flex">
  <div class="c-box c-box--info">Item 1</div>
  <div class="c-box c-box--info">Item 2</div>
  <div class="c-box c-box--info">Item 3</div>
</div>

Centered + larger gap

<div class="o-flex o-flex--center u-gap--xl">
  <div class="c-box c-box--info">Centered 1</div>
  <div class="c-box c-box--info">Centered 2</div>
</div>

Nested, right

<div class="o-flex">
  <div class="c-box c-box--info">Left</div>
  <div class="o-flex o-flex--end">
    <div class="c-box c-box--info">Right</div>
  </div>
</div>

Nested, center

<div class="o-flex">
  <div class="c-box c-box--info">First</div>
    <div class="o-flex o-flex--center u-gap--l">
        <div class="c-box c-box--info">Centered 1</div>
        <div class="c-box c-box--info">Centered 2</div>
    </div>
  <div class="c-box c-box--info">Last</div>
</div>

Column

<div class="o-flex o-flex--column">
  <div class="c-box c-box--info">Column 1</div>
  <div class="c-box c-box--info">Column 2</div>
  <div class="c-box c-box--info">Column 3</div>
</div>

No wrap

<div class="o-flex o-flex--nowrap">
  <div class="c-box c-box--info" style="min-width:12rem">No wrap 1</div>
  <div class="c-box c-box--info" style="min-width:12rem">No wrap 2</div>
  <div class="c-box c-box--info" style="min-width:12rem">No wrap 3</div>
  <div class="c-box c-box--info" style="min-width:12rem">No wrap 4</div>
</div>

Accessibility notes

Avoid relying solely on visual positioning to convey meaning. Keep a logical DOM order whenever possible so keyboard navigation and assistive technologies read content in a sensible sequence. For purely decorative re-ordering, ensure that keyboard focus flows in a predictable order.