Learn the Front-end Beta Search

justify-content

Definition

The justify-content CSS property is used in flexbox layouts to control the alignment and spacing of flex items along the main axis (horizontally, in the case of row direction).

The justify-content property accepts various values that determine how flex items are distributed within a flex container:

  • flex-start: Flex items are aligned to the start of the container.
  • flex-end: Flex items are aligned to the end of the container.
  • center: Flex items are centered within the container.
  • space-between: Flex items are evenly distributed along the main axis, with space placed between them.
  • space-around: Flex items are evenly distributed along the main axis, with equal space placed before, between, and after them.
  • space-evenly: Flex items are evenly distributed along the main axis, with equal space placed between them.

Here’s an example:

.container {
  display: flex;
  justify-content: center;
}

In this example, the .container class is set as a flex container, and the justify-content: center; rule centers the flex items horizontally within the container.

You can also use other values to achieve different alignments and spacing, such as flex-start, flex-end, space-between, space-around, or space-evenly, based on your layout requirements.

The justify-content property is a powerful tool in flexbox layouts, allowing you to control the positioning and distribution of flex items along the main axis.

Syntax

.layout {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
}

justify-content works across flexbox and grid layouts to position tracks or individual items along the main or cross axis.

Values

  • start / end: align content to the logical start or end edge (writing-mode aware).
  • space-between / space-around / space-evenly: distribute free space between tracks (main axis).
  • center: center items or tracks along the axis.
  • stretch: expand items to fill the available space when allowed.
  • baseline: line up first baselines for tidy typography.
  • safe / unsafe: let the browser avoid or allow overflow when centering could clip content.

Practical Examples

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 2rem;
}

Center-aligned tracks keep pricing cards balanced across breakpoints.

HTML

Default alignment

A B C

With justify-content: center

A B C
Code
<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Default alignment</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr);">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">With justify-content: center</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr); justify-content: center;">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
</div>

Tips & Best Practices

  • Align on the container first, then reach for *-self overrides only when a child needs unique treatment.
  • Prefer logical keywords (start, end) over physical directions for better localisation.
  • Combine alignment with gap to manage spacing without extra wrapper elements.
  • Pair with justify-items/align-items to fine-tune both axes in grid layouts.

Accessibility & UX Notes

Predictable alignment lowers cognitive load and lets keyboard users tab through content without unexpected jumps. Maintain visible focus indicators and ensure stretched components still provide generous hit areas.

Browser Support

align-* and justify-* properties are well supported. place-* shorthands require Chrome 59+, Edge 79+, Firefox 66+, Safari 12.1+.

  • gap for consistent spacing between tracks or items.
  • justify-content, align-items, and place-content to coordinate both layout axes.
  • flex-direction and grid-auto-flow influence which axis is treated as main vs. cross.

Related posts