How do you align items along the main axis?

flex-start: Items align to the start of the container (default).
flex-end: Items align to the end of the container.
center: Items are centered.
space-between: Items are evenly distributed with space between them.
space-around: Items are evenly distributed with equal space around them.

Use the justify-content property to align items along the main axis. Common values include: