Justify Content

The justify-content property aligns items along the main axis.

flex-start (Default)

Items align to the start:

flex-end

Items align to the end:

center

Items align to the center:

space-between

Equal space between items:

space-around

Equal space around items:

space-evenly

Truly equal spacing everywhere:

Interactive Playground

Practical: Navigation Bar

Practical: Card Footer

Exercise: Center Items

Center the buttons in the container: