CSS justify-content

The justify-content property in CSS is used to align flex items along the main axis of a flex container. It specifies how the extra space in a flex container is distributed among the flex items.

There are several values that can be used with the justify-content property:

flex-start: Items are packed toward the start of the main axis.
flex-end: Items are packed toward the end of the main axis.
center: Items are centered along the main axis.
space-between: Items are evenly distributed along the main axis, with the first item aligned to the start and the last item aligned to the end.
space-around: Items are evenly distributed along the main axis, with equal space around them.

Let's look at some examples to better understand how the justify-content property works.

Result:

Item 1

Item 2

Item 3

In the example above, the flex items are packed towards the start of the main axis using justify-content: flex-start.

Result:

Item 1

Item 2

Item 3

In this example, the items are centered along the main axis using justify-content: center.

Result:

Item 1

Item 2

Item 3

Here, the items are evenly distributed along the main axis with the first item aligned to the start and the last item aligned to the end using justify-content: space-between.

Experiment with different values of the justify-content property to see how it affects the alignment of flex items in a flex container.