justify-content

Last Updated: March 25, 2022

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-arounditems 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-evenlySpacing 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:startChild 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:endItems are packed towards the start direction of writing mode

justify-content:leftItems are packed towards the left end of the edge of the container

justify-content:rightItems are packed towards the right end of the edge of the container

Test