The justify-content property in Flexbox lets you control how items are distributed along the main axis of your flex container. The main axis is determined by the flex-direction property. With justify-content, you can align items to the start or end, center them, or distribute extra space in different ways. The most common values are:

• flex-start: items are packed toward the start of the main axis;
• flex-end: items are packed toward the end;
• center: items are centered along the main axis;
• space-between: items are evenly distributed, with the first item at the start and the last at the end;
• space-around: items are evenly distributed with equal space around them;
• pace-evenly: items are distributed with equal space between, before, and after each item.

Each value creates a different visual effect, especially when the flex container is wider than the total width of the items.

Using justify-content: space-between in the example above, the three items are stretched out so that the first item is flush with the start of the container, the last item is flush with the end, and the remaining space is evenly distributed between the items. This approach is useful when you want items to fill the available space without any gaps at the edges. Changing the value of justify-content will immediately affect the horizontal spacing and alignment of the flex items.