Justify-content vs Align-items in CSS: Key Differences and Usage

justify-content controls the alignment of items along the main axis (horizontal by default) in a flex or grid container, while align-items controls alignment along the cross axis (vertical by default). Both properties help position child elements but affect different directions in the layout.

Quick Comparison

Here is a quick side-by-side comparison of justify-content and align-items in CSS flexbox and grid layouts.

Aspect	justify-content	align-items
Axis controlled	Main axis (row by default)	Cross axis (column by default)
Default direction	Horizontal in flex-row	Vertical in flex-row
Purpose	Distributes space between and around items	Aligns items within container's cross axis
Common values	flex-start, center, space-between, space-around	flex-start, center, stretch, baseline
Used on	Flex or grid container	Flex or grid container
Effect example	Moves items left, center, or right	Moves items top, center, or bottom

Key Differences

justify-content aligns child elements along the container's main axis, which is horizontal by default in flexbox (flex-direction: row). It controls how extra space is distributed between, around, or at the ends of the items. For example, justify-content: center centers items horizontally.

align-items aligns child elements along the cross axis, which is vertical by default in flexbox. It controls how items align vertically within the container's height. For example, align-items: center centers items vertically.

Both properties apply to flex and grid containers but affect different directions. Understanding the container's main and cross axes is key to using these properties correctly.

Code Comparison

This example uses justify-content to center three boxes horizontally inside a flex container.

css

div.container {
  display: flex;
  justify-content: center;
  height: 100px;
  background-color: #f0f0f0;
}

div.box {
  width: 50px;
  height: 50px;
  background-color: #4a90e2;
  margin: 5px;
}

Output

Three blue boxes aligned horizontally in the center of a gray horizontal bar.

Align-items Equivalent

This example uses align-items to center the same three boxes vertically inside the flex container.

css

div.container {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #f0f0f0;
}

div.box {
  width: 50px;
  height: 50px;
  background-color: #4a90e2;
  margin: 5px;
}

Output

Three blue boxes aligned vertically in the center of a gray horizontal bar.

When to Use Which

Choose justify-content when you want to control how items spread out or align along the main axis, such as centering items horizontally or adding space between them.

Choose align-items when you want to control how items align along the cross axis, such as vertically centering items or stretching them to fill container height.

In most layouts, you will use both together to fully control item positioning inside flex or grid containers.

Key Takeaways

justify-content aligns items along the main axis (horizontal by default).

align-items aligns items along the cross axis (vertical by default).

Both properties apply to flex and grid containers but control different directions.

Use justify-content to distribute space between items horizontally.

Use align-items to align items vertically within the container.