> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Alignment Utilities: Justify, Items, and Self

> Align flex items on both axes in Elementor using AtomicKit's justify-*, items-*, self-*, and content-* utilities with responsive breakpoint support.

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.

| Class              | CSS                              | Effect                                                   |
| ------------------ | -------------------------------- | -------------------------------------------------------- |
| `.justify-start`   | `justify-content: flex-start`    | Pack items at the start of the axis                      |
| `.justify-center`  | `justify-content: center`        | Center items along the axis                              |
| `.justify-end`     | `justify-content: flex-end`      | Pack items at the end of the axis                        |
| `.justify-between` | `justify-content: space-between` | First item at start, last at end, space between the rest |
| `.justify-around`  | `justify-content: space-around`  | Equal space on both sides of each item                   |
| `.justify-evenly`  | `justify-content: space-evenly`  | Equal 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:

```html theme={null}
<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:

```html theme={null}
<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:

```html theme={null}
<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.

| Class            | CSS                       | Effect                                        |
| ---------------- | ------------------------- | --------------------------------------------- |
| `.items-start`   | `align-items: flex-start` | Align children to the start of the cross axis |
| `.items-center`  | `align-items: center`     | Center children on the cross axis             |
| `.items-end`     | `align-items: flex-end`   | Align children to the end of the cross axis   |
| `.items-stretch` | `align-items: stretch`    | Stretch 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.

```html theme={null}
<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:

```html theme={null}
<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.

| Class          | CSS                      | Effect                                         |
| -------------- | ------------------------ | ---------------------------------------------- |
| `.self-start`  | `align-self: flex-start` | Align this item to the start of the cross axis |
| `.self-center` | `align-self: center`     | Center this item on the cross axis             |
| `.self-end`    | `align-self: flex-end`   | Align 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:

```html theme={null}
<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.

| Class              | CSS                            | Effect                                     |
| ------------------ | ------------------------------ | ------------------------------------------ |
| `.content-start`   | `align-content: flex-start`    | Pack all lines toward the cross-axis start |
| `.content-center`  | `align-content: center`        | Center all lines in the cross-axis space   |
| `.content-end`     | `align-content: flex-end`      | Pack all lines toward the cross-axis end   |
| `.content-between` | `align-content: space-between` | Spread lines with equal space between them |
| `.content-around`  | `align-content: space-around`  | Equal space around each line               |
| `.content-evenly`  | `align-content: space-evenly`  | Equal space between all lines and edges    |

<Note>
  `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.
</Note>

```html theme={null}
<!-- 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.

```html theme={null}
<!-- 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:

```html theme={null}
<!-- 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>
```

<Info>
  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.
</Info>

## Best practices

<CardGroup cols={2}>
  <Card title="Justify vs items: know the axis" icon="arrows-up-down-left-right">
    `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.
  </Card>

  <Card title="Use self-* to break ranks" icon="arrow-up-from-line">
    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.
  </Card>

  <Card title="content-* needs wrap and height" icon="rectangle-history">
    `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.
  </Card>

  <Card title="Combine justify and items" icon="table-cells">
    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.
  </Card>
</CardGroup>