Flexbox Justify Content

CSS justify-content Property

The justify-content property aligns the flex items along the main-axis (horizontally).

This property can have one of the following values:

• center
• flex-start (default)
• flex-end
• space-around
• space-between
• space-evenly

Example

  .flex-container {

  display: flex;

  justify-content: center;
}

Example

  .flex-container {

  display: flex;

  justify-content: flex-start;
}

Example

  .flex-container {

  display: flex;

  justify-content: flex-end;
}

Example

  .flex-container {

  display: flex;

  justify-content: space-around;
}

Example

  .flex-container {

  display: flex;

  justify-content: space-between;
}

Example

  .flex-container {

  display: flex;

  justify-content: space-evenly;
}