CSS justify-content Property

What You’ll Learn

The justify-content property aligns flex items or grid tracks along the main axis and controls how extra space is distributed between them. It is one of the most useful flexbox tools for navbars, button rows, and responsive layouts.

Introduction

The justify-content property in CSS is used in flexbox and grid layouts to align items along the main axis of a container and distribute free space between them.

In a default horizontal flex row, the main axis runs left to right, so justify-content controls horizontal alignment. It is especially useful for navbars, toolbars, card actions, and any layout where you need items spaced predictably.

Definition and Usage

Apply justify-content to a flex or grid container, not to individual items. Use it when you want items grouped at the start, centered, pushed to the ends, or spaced evenly across the available width.

📝 Syntax

Apply justify-content to a flex or grid container:

.container {
  justify-content: value;
}

Basic Flexbox Example

.toolbar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Default Value

The default value of justify-content in flexbox is flex-start, which aligns items at the beginning of the main axis.

Syntax Rules

• Apply to a flex or grid container, not to individual items.
• Works along the main axis (inline axis in grid).
• Spacing values distribute free space between items or tracks.
• The property is not inherited.
• In a column flex direction, the main axis becomes vertical.

💎 Property Values

justify-content vs align-items

Examples Gallery

Center a toolbar, build a navbar with space-between, space icons evenly, and center grid tracks.

.toolbar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-row {
  display: flex;
  justify-content: space-evenly;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  justify-content: center;
  gap: 10px;
}

♿ Accessibility

• Preserve logical reading order — visual reordering with flex does not change DOM order for screen readers.
• Keep touch targets spaced — space-between nav links still need adequate tap area on mobile.
• Test keyboard focus — centered or spaced buttons must remain reachable in a sensible tab order.
• Avoid hiding content off-screen — extreme spacing on small screens can push controls out of view.
• Use semantic HTML — wrap navigation groups in <nav> with clear labels.

💡 Best Practices