Skip to main content
AtomicKit provides a complete set of alignment utilities for both the main axis (justify-*) and the cross axis (items-*, self-*, content-*) of flex containers. Together they replace nearly every manual positioning adjustment you would otherwise make in Elementor’s style panel, and all of them support responsive --on-* variants so alignment can shift at any breakpoint.

​
Justify Content

justify-* utilities align children along the main axis — horizontally in a row, vertically in a column.
ClassCSSEffect
.justify-startjustify-content: flex-startPack items at the start of the axis
.justify-centerjustify-content: centerCenter items along the axis
.justify-endjustify-content: flex-endPack items at the end of the axis
.justify-betweenjustify-content: space-betweenFirst item at start, last at end, space between the rest
.justify-aroundjustify-content: space-aroundEqual space on both sides of each item
.justify-evenlyjustify-content: space-evenlyEqual space between all items and edges

​
Header with logo and navigation — justify-between

justify-between is the go-to utility for header layouts where the logo sits on the left and the navigation on the right: 
<header class="flex items-center justify-between gap-4">
  <a href="/" class="flex items-center gap-2">
    <img src="logo.svg" alt="Brand" />
    <span>Brand</span>
  </a>
  <nav class="flex gap-4">
    <a href="/about">About</a>
    <a href="/work">Work</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

​
Centered hero content — justify-center

Center a heading and call-to-action along the main axis with justify-center. Pair with flex-col so items stack before being centered: 
<section class="flex flex-col items-center justify-center gap-6">
  <h1>Welcome to the site</h1>
  <p>A short, punchy tagline goes here.</p>
  <a href="/get-started" class="btn">Get started</a>
</section>

​
Right-aligned actions — justify-end

Use justify-end to push a group of buttons or actions to the far right of a row: 
<div class="flex justify-end gap-3">
  <button>Cancel</button>
  <button>Save changes</button>
</div>

​
Align Items

items-* utilities align children along the cross axis — vertically in a row, horizontally in a column. They apply to all children at once.
ClassCSSEffect
.items-startalign-items: flex-startAlign children to the start of the cross axis
.items-centeralign-items: centerCenter children on the cross axis
.items-endalign-items: flex-endAlign children to the end of the cross axis
.items-stretchalign-items: stretchStretch children to fill the container height

​
Vertically centered navigation bar — items-center

The single most-used alignment class in any UI: vertically centering mixed-height content in a horizontal bar. 
<nav class="flex items-center gap-6">
  <img src="logo.svg" alt="Logo" height="32" />
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="/blog">Blog</a>
  <a href="/login" class="btn">Log in</a>
</nav>

​
Equal-height card row — items-stretch

items-stretch forces all cards in a row to match the height of the tallest card, giving the row a consistent baseline: 
<div class="flex items-stretch gap-4 flex-wrap">
  <div class="basis-1-3">
    <div class="card">Short card content</div>
  </div>
  <div class="basis-1-3">
    <div class="card">This card has much more text and will be taller than the others by default.</div>
  </div>
  <div class="basis-1-3">
    <div class="card">Medium length card content here</div>
  </div>
</div>

​
Align Self

self-* utilities override the parent’s align-items for one specific child. Apply them directly to the child element you want to break from the group.
ClassCSSEffect
.self-startalign-self: flex-startAlign this item to the start of the cross axis
.self-centeralign-self: centerCenter this item on the cross axis
.self-endalign-self: flex-endAlign this item to the end of the cross axis
A classic use case is a card row where all cards stretch to equal height, but a single featured badge should pin to the top of its cell: 
<div class="flex items-stretch gap-4">
  <div>Regular item — stretches to full height</div>
  <div class="self-start">Featured badge — stays at the top</div>
  <div>Regular item — stretches to full height</div>
</div>

​
Align Content

content-* utilities control how multiple lines are distributed across the cross axis. They only have a visible effect when the flex container is using .flex-wrap and children have wrapped onto more than one line.
ClassCSSEffect
.content-startalign-content: flex-startPack all lines toward the cross-axis start
.content-centeralign-content: centerCenter all lines in the cross-axis space
.content-endalign-content: flex-endPack all lines toward the cross-axis end
.content-betweenalign-content: space-betweenSpread lines with equal space between them
.content-aroundalign-content: space-aroundEqual space around each line
.content-evenlyalign-content: space-evenlyEqual space between all lines and edges
content-* classes have no effect on single-line flex containers. You must combine them with .flex-wrap and a fixed container height for the spacing to be visible.
<!-- Multi-line tag cloud with lines spread evenly -->
<div class="flex flex-wrap content-between gap-2" style="min-height: 12rem;">
  <span class="tag">Design</span>
  <span class="tag">Development</span>
  <span class="tag">Strategy</span>
  <span class="tag">Branding</span>
  <span class="tag">Motion</span>
  <span class="tag">Copywriting</span>
</div>

​
Layout recipes

These are the three most frequently reached-for alignment combinations. Copy and adapt them as a starting point for your own components. 
<!-- Centered hero: column, centered on both axes -->
<div class="flex flex-col items-center justify-center gap-6">
  <h1>Page heading</h1>
  <p>Supporting copy</p>
  <a href="#">Primary action</a>
</div>

<!-- Navigation bar: row, vertically centered, logo left / nav right -->
<div class="flex items-center justify-between gap-4">
  <a href="/">Logo</a>
  <nav class="flex gap-4">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</div>

<!-- Equal-height card row: stretch cross axis, wrap onto new lines -->
<div class="flex items-stretch gap-4 flex-wrap">
  <div class="basis-1-3">Card A</div>
  <div class="basis-1-3">Card B</div>
  <div class="basis-1-3">Card C</div>
</div>

​
Responsive variants

All alignment utilities support the --on-* suffix. This is useful when center-aligned content on mobile should switch to a space-between layout on wider screens: 
<!-- Stacked and centered on mobile, row with between on medium+ -->
<div class="flex flex-col items-center justify-center flex-row--on-m justify-between--on-m gap-4">
  <span>Brand</span>
  <nav>Navigation</nav>
</div>
Responsive suffixes are mobile-first: --on-s, --on-m, --on-l, --on-xl. A class without a suffix applies at all viewport sizes and is overridden by any breakpoint-specific class.

​
Best practices

Justify vs items: know the axis

justify-* always targets the main axis (the direction children flow). items-* and self-* target the cross axis. Keeping this mental model clear prevents trial-and-error alignment.

Use self-* to break ranks

Rather than wrapping an outlier child in its own container, reach for .self-start, .self-center, or .self-end to nudge it independently while the rest of the group stays consistent.

content-* needs wrap and height

content-* has no effect unless the container both wraps (flex-wrap) and has enough height for the lines to actually spread. Set min-height or height on the container to give the lines room.

Combine justify and items

Centering an element on both axes requires both justify-center and items-center. One class alone centers on only one axis, which is a common source of “almost centered” bugs.