The justify-content Property of CSS

The justify-content Property

The justify-content property is used to align the flex items

The flex-start value aligns the flex items at the beginning of the container (this is default)

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

The flex-end value aligns the flex items at the end of the container

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

The center value aligns the flex items at the center of the container

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

The space-between value displays the flex items with space between the lines

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

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