🎯 CSS justify-content Property

The justify-content CSS property is used in Flexbox to align items along the main (horizontal) axis.

It controls how items are distributed when there is extra space inside a flex container.

Items are aligned at the start of the container.

Items are aligned at the end of the container.

Items are centered inside the container.

Space is distributed evenly between items.

Space is distributed around items equally.

Resets the property to default (usually flex-start).

.container {
    display: flex;
    justify-content: space-between;
    width: 500px;
}

.item {
    width: 50px;
    height: 50px;
}
                

In this example, items are evenly distributed across the container width.