CSS justify-content Property

CSS justify-content property is used to align the flex items along the main-axis(horizontally by default) within their flex container.

By default, the flex items are aligned at the starting of the flex container. But using the justify-content property we can align flex items anywhere within the flex container.

In the example below, we have used justify-content:center;. This means that all the flex items will be aligned in the center of the flex container.

Example:

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

The justify-content: flex-start; aligns the flex items at the beginning of the flex container. See the example below:

Example:

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

The justify-content: flex-end; aligns the flex items at the end of the flex container. See the example below:

Example:

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

If we use justify-content: space-between;, the unused(extra) space is distributed in such a manner that the space between any two consecutive flex items is exactly the same. See the example below:

Example:

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

When we set the justify-content property to space-around, the flex items position themselves in such a way that the space around each and every flex item is exactly the same. See the example below:

Example:

.flex-container{
  display: flex;
  justify-content: space-around;
}

When we set the justify-content property to space-evenly, the extra space is distributed in such a way that space before and after each flex item remains exactly the same. Which means that the extra space is evenly distributed. See the example below:

Example:

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

CSS Syntax

The justify-content property has the following syntax:

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Property Values

The justify-content property accepts the following values:

General Info