justify-content

When a flexible container’s items do not use all available space on the main axis, the justify-content property aligns the items horizontally.

Syntax

Use align-items for vertical alignment of a flexible container’s items.

div.ex {
  display: flex;
  justify-content: space-between;
}

Values

flex-start
Default value. Positions items at the beginning of the containing element.

flex-end
Positions items at the end of the containing element.

center
Positions items at the beginning of the containing element.

space-between
There will be space between the items.

space-around
There will be space before, between, and after the items.

space-evenly
There will be equal space around the items.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of justify-content? Submit a codepen.io demo and we'll showcase it here ↴