In this tutorial, we will look into the alignment property provided by the flex container starting off with justify-content.
by default, justify-content is set to the value to the flex-start which places the item at the beginning of the main axis.
.container { display: flex; justify-content: flex-start; /* Default Value */ }
As the main axis flows from left to right so the by default items starts from the left
This causes the item to be placed at the end of the main axis.
.justify-flex-end { justify-content: flex-end; }
and the markup will be :
<div class="container d-flex justify-flex-end"> ... </div>
After this what we will get to display is:
it is also possible to align the content at the center of the main axis and the value of the property is
.justify-center { justify-content: center; }
<div class="container d-flex justify-center"> ... </div>
Flexbox also provides additional value that can control how the extra space has to be distributed so ve have a value of space-between.
.justify-space-between { justify-content: space-between; }
<div class="container d-flex justify-space-between"> ... </div>
After this what we will get to display is: you can see that the extra space that was left out is evenly split and added in between the flex items.
Sometime you might also want the space the first item and after the last item for such a scenario we have space-around value.
.justify-space-around { justify-content: space-around; }
<div class="container d-flex justify-space-around"> ... </div>
After this what we will get to display is: The space at the beginning and at the end is half the space between the flex item.
However, if you want the same space even at the start and at the end of the item the value can be space-evenly.
.justify-space-evenly { justify-content: space-evenly; }
<div class="container d-flex justify-space-evenly"> ... </div>
what you have to keep in mind is justify-content property aligns items based on the main axis, so if we set the flex-direction to column the property will deal with vertical alignment.
See the Pen Flex Justify Content by rehmaanali (@geekstrick) on CodePen.