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

# Justify Content

> Use the shipped `justify-*` utilities to control main-axis distribution in flex layouts.

export const JustifyStartDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-start</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "flex-start",
    gap: "1rem",
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

export const JustifyCenterDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-center</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "center",
    gap: "1rem",
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

export const JustifyEndDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-end</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "flex-end",
    gap: "1rem",
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

export const JustifyBetweenDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-between</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "space-between",
    gap: 0,
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

export const JustifyAroundDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-around</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "space-around",
    gap: 0,
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

export const JustifyEvenlyDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.justify-evenly</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    justifyContent: "space-evenly",
    gap: 0,
    width: "100%"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
        </div>
      </div>
    </div>;
};

## Overview

Justify utilities control how flex items are distributed along the main axis. Use them to push items to the start, center, end, or spread them across the available space.

| Class              | CSS                               |
| ------------------ | --------------------------------- |
| `.justify-start`   | `justify-content: flex-start;`    |
| `.justify-center`  | `justify-content: center;`        |
| `.justify-end`     | `justify-content: flex-end;`      |
| `.justify-between` | `justify-content: space-between;` |
| `.justify-around`  | `justify-content: space-around;`  |
| `.justify-evenly`  | `justify-content: space-evenly;`  |

Responsive `justify-*--on-*` variants are also bundled.

## Start

`.justify-start` packs items toward the start of the main axis. This is the default behavior for flex containers.

<JustifyStartDemo />

```html theme={null}
<div class="elementor-element flex justify-start gap-4">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>
```

## Center

`.justify-center` groups items in the center of the container. This is commonly used for centered hero content, modal actions, and single-row centered navigation.

<JustifyCenterDemo />

```html theme={null}
<div class="elementor-element flex justify-center gap-4">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>
```

## End

`.justify-end` packs items toward the end of the main axis. Use this for right-aligned button groups and trailing actions.

<JustifyEndDemo />

```html theme={null}
<div class="elementor-element flex justify-end gap-4">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>
```

## Between

`.justify-between` places the first item at the start and the last item at the end, with equal space between the rest. This is the go-to for header layouts with a logo on one side and navigation on the other. The live demo above shows that pattern; the snippet below uses three blocks so it matches the minimal style used in the other sections.

<JustifyBetweenDemo />

```html theme={null}
<div class="elementor-element flex items-center justify-between gap-4">
  <div class="padding-4 background-primary text-white rounded">01</div>
  <div class="padding-4 background-primary text-white rounded">02</div>
  <div class="padding-4 background-primary text-white rounded">03</div>
</div>
```

## Around

`.justify-around` distributes equal space around each item. The outer edges get half the space of the gaps between items.

<JustifyAroundDemo />

```html theme={null}
<div class="elementor-element flex justify-around">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>
```

## Evenly

`.justify-evenly` distributes perfectly equal space between all items and the container edges. Every gap is the same size.

<JustifyEvenlyDemo />

```html theme={null}
<div class="elementor-element flex justify-evenly">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>
```

## Best Practices

* Use justify helpers when the space should be distributed across the main axis.
* Pair with `items-*` when both axes need deliberate control.
* Keep `.gap-*` in the container when you still want fixed spacing between siblings.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Align Items" href="/flexbox/align-items">
    Control the cross-axis for the full line
  </Card>

  <Card title="Gap" href="/flexbox/gap">
    Keep consistent spacing while changing distribution
  </Card>
</CardGroup>