Flexbox

The flexbox object provides utility classes for building flexible layouts. The base .obj-flex class creates a flex container with wrapping enabled.

Container

The .obj-flex class creates a flex container. Direction modifiers control the main axis.

Direction Modifiers

Class	Description
.obj-flex--row	Row direction (default)
.obj-flex--row-reverse	Reversed row direction
.obj-flex--column	Column direction
.obj-flex--column-reverse	Reversed column direction
.obj-flex--nowrap	Disable wrapping

Justify Content

Use .obj-flex--justify-content__<value> to control main-axis alignment.

Class	Value
.obj-flex--justify-content__flex-start	flex-start
.obj-flex--justify-content__flex-end	flex-end
.obj-flex--justify-content__center	center
.obj-flex--justify-content__between	space-between
.obj-flex--justify-content__around	space-around
.obj-flex--justify-content__evenly	space-evenly

Align Items

Use .obj-flex--align-items__<value> to control cross-axis alignment.

Class	Value
.obj-flex--align-items__start	flex-start
.obj-flex--align-items__end	flex-end
.obj-flex--align-items__center	center
.obj-flex--align-items__stretch	stretch
.obj-flex--align-items__baseline	baseline

Flex Items

Use .obj-flex-item for flex children. Width modifiers are available at xs, sm, md, lg, and xl sizes. Responsive variants append @bp (e.g., .obj-flex-item__lg@md).

Modifier	Width
.obj-flex-item__xs	10em
.obj-flex-item__sm	15em
.obj-flex-item__md	20em (default)
.obj-flex-item__lg	30em
.obj-flex-item__xl	40em

Examples

Basic Flex Container

Three items laid out in a row using the default .obj-flex container.

Item A

Item B

Item C

<div class="obj-flex" style="gap: 0.5rem">
  <div class="util-background-odyssey util-pad-all-md">Item A</div>
  <div class="util-background-creamery util-pad-all-md">Item B</div>
  <div class="util-background-odyssey util-pad-all-md">Item C</div>
</div>

Column Direction

Items stacked vertically using .obj-flex--column.

Column A

Column B

Column C

<div class="obj-flex obj-flex--column" style="gap: 0.5rem">
  <div class="util-background-odyssey util-pad-all-md">Column A</div>
  <div class="util-background-creamery util-pad-all-md">Column B</div>
  <div class="util-background-odyssey util-pad-all-md">Column C</div>
</div>

Reversed Row

Items rendered in reverse order using .obj-flex--row-reverse. The source order is First, Second, Third.

First

Second

Third

<div class="obj-flex obj-flex--row-reverse" style="gap: 0.5rem">
  <div class="util-background-odyssey util-pad-all-md">First</div>
  <div class="util-background-creamery util-pad-all-md">Second</div>
  <div class="util-background-odyssey util-pad-all-md">Third</div>
</div>

Centered Content

Items grouped in the center of the container using .obj-flex--justify-content__center.

Center A

Center B

Center C

<div class="obj-flex obj-flex--justify-content__center" style="gap: 0.5rem">
  <div class="util-background-odyssey util-pad-all-md">Center A</div>
  <div class="util-background-creamery util-pad-all-md">Center B</div>
  <div class="util-background-odyssey util-pad-all-md">Center C</div>
</div>

Space Between

Items spread to the edges with equal space between them using .obj-flex--justify-content__between.

Start

Middle

End

<div class="obj-flex obj-flex--justify-content__between">
  <div class="util-background-odyssey util-pad-all-md">Start</div>
  <div class="util-background-creamery util-pad-all-md">Middle</div>
  <div class="util-background-odyssey util-pad-all-md">End</div>
</div>

Space Evenly

Items distributed with equal space around and between them using .obj-flex--justify-content__evenly.

Even A

Even B

Even C

<div class="obj-flex obj-flex--justify-content__evenly">
  <div class="util-background-odyssey util-pad-all-md">Even A</div>
  <div class="util-background-creamery util-pad-all-md">Even B</div>
  <div class="util-background-odyssey util-pad-all-md">Even C</div>
</div>

Align Items Center

Items of varying height vertically centered on the cross axis using .obj-flex--align-items__center.

Short

Tall

Short

<div
  class="obj-flex obj-flex--align-items__center"
  style="gap: 0.5rem; min-height: 120px"
>
  <div class="util-background-odyssey util-pad-all-sm">Short</div>
  <div
    class="util-background-creamery util-pad-all-md"
    style="padding-top: 2rem; padding-bottom: 2rem"
  >
    Tall
  </div>
  <div class="util-background-odyssey util-pad-all-sm">Short</div>
</div>

Align Items Stretch

Items stretched to fill the full height of the container using .obj-flex--align-items__stretch.

Stretched

Stretched

Stretched

<div
  class="obj-flex obj-flex--align-items__stretch"
  style="gap: 0.5rem; min-height: 120px"
>
  <div class="util-background-odyssey util-pad-all-sm">Stretched</div>
  <div class="util-background-creamery util-pad-all-sm">Stretched</div>
  <div class="util-background-odyssey util-pad-all-sm">Stretched</div>
</div>

Flex Item Widths

Items with different width modifiers: .obj-flex-item__sm (15em) and .obj-flex-item__lg (30em).

Small (15em)

Large (30em)

<div class="obj-flex">
  <div
    class="obj-flex-item obj-flex-item__sm util-background-odyssey util-pad-all-md"
  >
    Small (15em)
  </div>
  <div
    class="obj-flex-item obj-flex-item__lg util-background-creamery util-pad-all-md"
  >
    Large (30em)
  </div>
</div>