The justify-content property defines how flex items are positioned and how extra space is distributed along the main axis of a flex container.

flex-start places the flex items at the beginning of the main axis. This is the default behavior.

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

flex-end moves the flex items to the end of the main axis.

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

center places all flex items in the center of the main axis.

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

space-between places the first item at the beginning and the last item at the end. The remaining space is distributed equally between the items.

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

space-around gives each flex item equal space around it. The space at the edges is half the space between adjacent items.

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

space-evenly distributes the available space equally between all items and the container edges.

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

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

Because the direction is row, the main axis is horizontal. Therefore justify-content: center centers the items horizontally.

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

When flex-direction: column is used, the main axis becomes vertical. Therefore, justify-content controls vertical distribution.

A website header can use justify-content to position a logo and navigation links.

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

.nav-links {
  display: flex;
  gap: 20px;
}