justify-content
This property is a commonly used property when you want to align the child elements inside the parent property. If you are a front-end developer you know the value of this property when it comes to layout building
So basically this defines how the items are placed along the main axis and by assigning the correct value for the property you can control how the free space between child elements is distributed along the main axis.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
justify-content:space-around
items are evenly distributed along the line. spaces are equal between the items. Container’s edge and the first item has got one unit distance and adjacent items have got two units of distance
justify-content:space-evenly
Spacing between items are equal and maintain the same space between the container edge and the first item as well as the last item
justify-content:start
Child items are packed towards the start direction of weighing mode. If you have RTL then it is packed towards the right direction otherwise towards the left direction
justify-content:end
Items are packed towards the start direction of writing mode
justify-content:left
Items are packed towards the left end of the edge of the container
justify-content:right
Items are packed towards the right end of the edge of the container
