How to utilize justify-content in CSS

It defines the content items along the main axis. The CSS justify-content property characterizes how the program distributes space between and around content things along the main axis of a flex content. It also adjusts the div content beyond the alignment of items when they exceed the line.

Syntax

flex-start : Default value. Things are situated toward the start of the holder 
flex-end: Items are situated toward the finish of the container 
center : Items are situated in the focal point of the container 
space-between: Items will have space between them 
space-around: Items will have space previously, between, and after them 
space-evenly: Items will have equivalent space around them 
initial: Sets this property to its default value. Find out about starting 
inherit: Inherits this property from its parent component.

Example

#content {
  display: flex;
  justify-content: space-between;
}

#content > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}