When using Flexbox, justify-content helps align items along the main axis. Two useful values are:

space-around

• Equal space is added around each item.

• The space on the outer edges (before the first item and after the last) is half the space between items.

• This results in items appearing more grouped toward the center.

space-evenly

• Equal space is added between all items and at the edges.

• The space before the first item, between items, and after the last item is the same.

Visual summary