Justify Content

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

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.

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

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

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

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

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

<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

Align Items

Control the cross-axis for the full line

Gap

Keep consistent spacing while changing distribution